低版本的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. Lab3：虚拟内存管理

    前言 虚拟内存是计算机系统内存管理的一种技术.它使得应用程序认为它拥有连续的可用的内存(一个连续完整的地址空间),而实际上,它通常是被分隔成多个物理内存碎片,还有部分暂时存储在外部磁盘存储器上,在需要 ...

  2. linux下安装谷歌拼音输入法

    linux下安装谷歌拼音输入法 输入以下命令,等待安装完成. sudo apt-get install fcitx 接着输入,完成安装谷歌中文输入法 sudo apt-get install fcit ...

  3. | C语言I作业04

    | C语言I作业004 标签: 18软件 李煦亮 问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://www.cnblogs.com/pengchen511/p/ ...

  4. [转帖]pidstat 命令详解

    pidstat 命令详解 https://www.jianshu.com/p/3991c0dba094 pidstat -r -u -d -p 各种参数非常好用. pidstat 概述 pidstat ...

  5. Istio 1.4 更新了 | 感觉学不完

    Istio 1.4 更新了 官网 https://istio.io/news/2019/announcing-1.4/ Istio 评选 为GitHub上增长最快的五个 开源项目之一 变更说明获取更改 ...

  6. scrapy爬虫框架windows下的安装问题

    windows操作系统   python版本是3.6.0       通过Anaconda命令conda install scrapy安装scrapy,安装过程中没有问题.   然后在命令行输入命令准 ...

  7. tkinter添加背景音乐

    一.问题利用tkinter来写一个游戏,添加一个背景音乐提高可玩性. 二.解决1.安装pygame首先是利用pygame的一个播放流:[pip install pygame]来完成pygame的安装. ...

  8. java中的Date类

    一.Date类简介 日期类主要包括Date类与Calendar类,这一节我们先介绍Date类, Date 表示特定的瞬间,精确到毫秒.Date类用于表示日期和时间,在计算机中的表示和我们现实世界使用差 ...

  9. 对ssm框架里面的一些常用注解的理解

    @Componcnt :作用就是把当前类对象存入spring容器中 属性:value 用于指定bean的id 当我们不写的时候默认就是当前类名,并且首字母要小写 ------------------- ...

  10. C#采集UVC摄像头画面并支持旋转和分辨率切换

    在项目中,我们会需要控制uvc摄像头,采集其实时画面,或者对其进行旋转.目前市面上大多数USB摄像头都支持UVC协议.那么如何采集呢?当然是采用SharpCamera!因为SharpCamera支持对 ...