低版本的IE,火狐 不支持  Inline-Block 属性，想要达到目的我们需要多做一些额外的工作 ，

参考页面为：https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

<ul>

    <li>

        <h4>This is awesome</h4>

        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"

        alt="lobster" width="75" height="75"/>

    </li>

...

<ul>

<style>

    li {

        width: 200px;

        min-height: 250px;

        border: 1px solid #000;

        display: inline-block;

        margin: 5px;

    }

</style>

　　

li 标签里面 不要直接写文本字符串 需要用编标包裹，不然inline 会出现奇怪现象，离左边距离 有问题 ，如图1

用div包裹 恢复正常

<html>

<head>

	<title></title>

<style type="text/css">

body{

	margin:0 0;

	padding:0 0;

	font-size:14px;

	text-decoration:none;

}

ul {

 margin :0

 padding:0

font-size: 0;

}

li{

min-height:50px;

width:100px;

background-color:#c90;

border-bottom:1px dotted red;

display:inline-block;

list-style-type: none;

}

</style>

</head>

<body>

<div>

	<ul>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	<li><div>1</div></li>

	</ul>

<div>

</body>

</html>

Firefox 2  不支持inline-block 但是他支持火狐独有的display 属性：-moz-inline-stack  这个属性和inline-block 很像，如果我们把他放在display:inline-block 前面，当火狐2浏览器遇到的时候会忽略inline-block 而保持-moz-inline-stack，因为他本身不支持inline-block属性　，如果浏览器支持display:inline-block 那么他就会忽略前面的-moz-inline-stack

 li {

        width: 200px;

        min-height: 250px;

        border: 1px solid #000;

        display: -moz-inline-stack;

        display: inline-block;

        vertical-align: top;

        margin: 5px;

    }

　IE 6，IE7  不支持display:inline-block属性，IE 元素haslayout属性，很多bug 由于IE 此属性导致，IE6，7低版本浏览器，width,height属性不能有效触发haslayout 属性，是有些元素不具有布局。

但是zoom 属性总是能触发IE haslayout 属性。IE 支持display:inline,内联元素， 和其他浏览器不同的是 IE  haslyout=-1(有布局的时候),添加display:inline,相当于其他浏览器的display:inline-block

IE 6 不支持min-height属性，我们要设置_height:250px,元素在IE 下的高度，_height:250px 在其他浏览器中将被忽略。

所以最终

li{

min-height:50px;

width:100px;

background-color:#c90;

border-bottom:1px dotted red;

display:-moz-inline-stack;

display:inline-block;

list-style-type: none;

vertical-align:top;

zoom:1;

*display:inline;

_height: 250px;/*IE 6 不支持min-height:250px;其他浏览器会忽略_height: */

}

　　

CSS Cross-Browser Inline-Block的更多相关文章

  1. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  2. css -- 通俗理解inline、block、inline-block

    display:inline; 内联元素,简单来说就是在同一行显示. display:block; 块级元素,简单来说就是就是有换行,会换到第二行. display:inline-block; 就是在 ...

  3. css菜鸟学习之block，inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  4. css盒子流动和block。inline

    回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是  宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...

  5. XSS CSS Cross SiteScript 跨站脚本攻击

    XSS攻击及防御 - 高爽|Coder - CSDN博客 https://blog.csdn.net/ghsau/article/details/17027893 XSS又称CSS,全称Cross S ...

  6. CSS包含块containing block详解

    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...

  7. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  8. css包含块containing block

    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...

  9. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  10. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. aspxgridview 实现单选

    <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server"             AutoGenerat ...

  2. framework7 Autocomplete (自动完成) 具体使用

    官网地址:https://framework7.io/docs/autocomplete.html#autocomplete-parameters 效果图: <meta charset=&quo ...

  3. pycharm_python_flask相关学习心得逐步更新

    2019-10-30: Pycharm的interpreter配置问题对于安装第三方库,如果能够在配置的可视化界面安装成功更好.如果不能可视化安装,则在pycharm的terri..仿cmd下用pip ...

  4. springboot整合docker部署

    环境安装 首先,需要安装Docker(例如:docker for windows) 下载地址:https://download.docker.com/win/stable/Docker%20for%2 ...

  5. 使用Nginx 对Laravel 进行负载

    项目环境php7.2, nginx , Laravel,开发的微信公众号应用 .目前访问量的上升,单台服务器不能满足需求,于是用nginx做了负载.以下是一种可行性方案,目前正在使用. session ...

  6. 【转】用Python做股市量化策略投资数据分析

    金融量化分析介绍     本文摘要; 金融量化分析介绍 1.什么是金融量化分析 2.金融量化分析可以干什么 3.为什么将python运用于金融 4.常用库简介 1.什么是金融量化分析 从标题中我们可以 ...

  7. Nginx深入详解之upstream分配方式

    一.分配方式 Nginx的upstream支持5种分配方式,下面将会详细介绍,其中,前三种为Nginx原生支持的分配方式,后两种为第三方支持的分配方式: 1.轮询 轮询是upstream的默认分配方式 ...

  8. 【转载】C#如何获取DataTable中某列的数据类型

    在C#的数据表格DataTable的操作中,有时候因为业务需要,我们需要获取到DataTable所有列或者某一列的数据类型,此时我们可以通过DataTable中的Columns属性对象的DataTyp ...

  9. 7.JavaScript-Promise的并行和串行

    Promise 并行 Promise.all是所有的Promise执行完毕后(reject|resolve)返回一个Promise对象. 最近在开发一个项目中,需要等接口拿到全部数据后刷新页面,取消l ...

  10. 在微信小程序中使用redux

    本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处 ...