低版本的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. 【C/C++开发】C++11 并发指南三(std::mutex 详解)

    本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...

  2. 了解编程语言 ----- c# 简介

    1.编程语言 编程语言: 为了实现人与机器的交互,计算机主要识别的就是 0 和 1 语言的发展过程主要分为: 1.面向机器的语言:二进制,汇编 2.面向过程的语言:汇编语言,C语言,B语言, 3.基于 ...

  3. Elasticsearch Transport 模块创建及启动分析

    Elasticsearch 通信模块的分析从宏观上介绍了ES Transport模块总体功能,于是就很好奇ElasticSearch是怎么把服务启动起来,以接收Client发送过来的Index索引操作 ...

  4. thymeleaf是用于编写html模版的编程语言（工具语言）

    一.编程语言 用于编写html模版的编程语言. thymeleaf一种命令式和声名式混合的寄生语言. html与thymeleaf的结合是dsl与命令式语言的结合. html与thymeleaf的结合 ...

  5. Java分布式唯一ID生成方案——比UUID效率更高的生成id工具类

    package com.xinyartech.erp.core.util; import java.lang.management.ManagementFactory; import java.net ...

  6. 能写数据后台，需要掌握哪些进阶的sql语句？

    国庆假期花了一些时间,首次尝试并玩转 grafana,这几天继续不断优化和完善,如今看着自己的成果,相当满意.--逐步接近我想要的理想后台啦. 需求是不停歇的.今天我又给自己发掘了一些新需求,比如变量 ...

  7. Oracle 加解密教程

    参考Oracle官方文档 在Oracle使用dbms_crypto包进行加解密 首先,授权当前用户使用加解密包 在sql中运行:connect sqlplus as sysdbagrant execu ...

  8. Smobiler客户端会话

    //客户端会话存值 Client.Session["userid"] = Class1.userid; //客户端会话取值 userid = Client.Session[&quo ...

  9. 让div在body中任意拖动

    HTML代码 <div id="idOuterDiv" class="CsOuterDiv"> </div> CSS代码 body { ...

  10. 颜色rgba和16进制

    今天阅读代码的时候看到了一个实现颜色渐变的效果,不同于以往使用函数实现的颜色渐变,这个是规律的递增rgba里面的几个参数完成的,看起来就像是等差数列一样.没想到还能这样来,简单的了解了一下 rgba的 ...