低版本的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. [.Net,C#]三类资源：流对象Stream，字节数组byte[]，图片Image

    三类资源:流对象Stream,字节数组byte[],图片Image 关系:Stream<=>byte[],byte[]<=>Image Stream 与Image相互转化的媒介 ...

  2. 四元数， Physx中的四元数

    四元数的概念 & 如何使用四元数:  绕V轴旋转 f 角,对应的四元数: q = ( cos(f/2), Vx*sin(f/2), Vy*sin(f/2), Vz*sin(f/2) ) = c ...

  3. [转帖]Elasticsearch数据库

    Elasticsearch数据库 2018-05-06 11:30:48 七色米 阅读数 23634更多 分类专栏: 数据库   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转 ...

  4. [转帖]从 SOA 到微服务，企业分布式应用架构在云原生时代如何重塑？

    从 SOA 到微服务,企业分布式应用架构在云原生时代如何重塑? 2019-10-08 10:26:28 阿里云云栖社区 阅读数 54   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权 ...

  5. golang知识精要（一）

    一.第一章 命令行参数可通过os.Args访问,os.Args是切片 切片遵循左闭右开原则,如sl[1:3]不包含下标为3的元素 for循环两种方式 方式一: for initial; conditi ...

  6. 单口 RAM、伪双口 RAM、真双口 RAM、单口 ROM、双口 ROM 到底有什么区别呢？

    打开 IP Catalog,搜索 Block Memory Generator,即可看到其 Memory Type 可分为 5 中,分别是单口 RAM(Single Port RAM).伪双口 RAM ...

  7. Tomcat 部署 Jenkins （Linux系统）

    环境说明:Linux环境,CentOS 7版本. 关于部署tomcat,见上一篇博客:https://www.cnblogs.com/lelelong/p/10252225.html 接着,在Tomc ...

  8. golang ---rune与byte

    golang内置类型有rune类型和byte类型. rune类型的底层类型是int32类型,而byte类型的底层类型是int8类型,这决定了rune能比byte表达更多的数. 在unicode中,一个 ...

  9. Jquery源码解析及案例分析

    本人刚学先上链接(别人写的挺好的)后期同步补上

  10. C# 进程 与 线程

    C#多线程和线程池1.0.线程的和进程的关系以及优缺点windows系统是一个多线程的操作系统.一个程序至少有一个进程,一个进程至少有一个线程.进程是线程的容器,一个C#客户端程序开始于一个单独的线程 ...