低版本的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. Jmeter接口测试【1】_安装配置教程

    一.安装Java环境 1.下载JDK JDK 可以到官网选择windows系统版本(32位/64位)下载http://www.oracle.com/technetwork/java/javase/do ...

  2. FusionInsight大数据开发---Flume应用开发

    Flume应用开发 要求: 了解Flume应用开发适用场景 掌握Flume应用开发 Flume应用场景Flume的核心是把数据从数据源收集过来,在送到目的地.为了保证输送一定成功,发送到目的地之前,会 ...

  3. -Git Linux vi/vim 命令 按键 MD

    目录 目录 Linux vi/vim 简介 vi/vim 的使用 命令模式 输入模式 底线命令模式 vi/vim 使用实例 使用 vi/vim 进入一般模式 按下 i 进入输入模式,开始编辑文字 按下 ...

  4. 解决IE下打印iframe时，页面比例变小的问题

    $('#reportFrame')[0].contentWindow.printMyself();//主页面调用iframe里的打印方法 //reportFrame里的方法 function prin ...

  5. c# 读取文件目录下的信息

    private void button1_Click(object sender, System.EventArgs e) { //浏览文件夹 this.folderBrowserDialog1.Sh ...

  6. C#读写修改设置调整UVC摄像头画面-色调

    有时,我们需要在C#代码中对摄像头的色调进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  7. C# vb .net图像合成-合成椭圆

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  8. Spring MVC异常友好展示

    官网 https://docs.spring.io/spring/docs/4.3.25.RELEASE/spring-framework-reference/htmlsingle/ Springmv ...

  9. js学习之数据结构和算法

    js中的数据结构 1.列表 待办事项列表.购物清单.最佳十名榜单等等. 适用: 1)数据结构较为简单, 2)不需要在一个长序列中查找元素,或者对其进行排序 2.栈 一摞盘子 ----- 添加删除只能从 ...

  10. 16. Promise对象

    目录 Promise对象 一.含义 1. Promise是什么 2. 实例讨论 二.Promise特性案例解析 1. Promise的立即执行性 2. promise的三种状态 3. Promise的 ...