在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置 display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了 layout，而它本就是行布局，所以触发后，块元素依然是行布局。IE8识别display:inline-block;
在IE6、IE7中实现块元素的inline-block效果有以下两种方法：1先使用display:inline-block属性触发layout，然后再定义display:inline让块元素呈现内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典BUG)。2 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.jinyuanbao.cn">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

body{text-align:center;}

.inlineBlock{width:100px;height:100px;border:1px solid #FF7900;margin:8px;display:inline-block;text-align:center;}

.inline{*display:inline;}

.layout{zoom:1;display:inline-block;}

</style>

</head>

<body>

<div class="inlineBlock inline">1</div>

<div class="inlineBlock inline">2</div>

<div class="inlineBlock inline">3</div>

</body>

</html>

　　

display:inline-block在IE6/Ie7和IE8中的区别的更多相关文章

  1. CSS 在IE6, IE7 和IE8中的差别////////////////z

    CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...

  2. IE6、IE7、IE8中overflow:hidden无效问题

    在做图片无缝滚动效果时遇到了这个兼容问题 div宽1000px高250px超出隐藏. 但在Firefox中正常,超出部分隐藏,但是在IE6.IE7.IE8.Sogou高速下都显示了出来.做了这么多年的 ...

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

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

  4. text-align 在ie7与ie8下的区别

      在某元素上应用text-align:center; 在ie7下解释为,该元素内的元素和文字都居中. 在ie8下解释为,该元素内的文字居中. 例如:<div style="borde ...

  5. IE6\ IE7、IE8\9\10和Firefox的hack方式

    #test{color:red;color:red !important;/ Firefox.IE7支持 */_color:red; / IE6支持 */*color:red; / IE6.IE7支持 ...

  6. JS创建 trim（） 方法，此方法在IE7、IE8中不存在 需要自定义

    function trim(str){ //创建空格对象 var space = new String(" "); /* str = trimLeft(str,space); st ...

  7. 简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera

    一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏 ...

  8. IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  9. IE6 IE7 IE8(Q) 不支持 JSON 对象

    标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...

随机推荐

  1. jmeter 非GUI执行测试，没有响应数据保存到jtl文件办法

    估计是jmeter为了减轻客户机负担,就没又默认把这些信息保存,如果想要保存,也可以,需要做出如下配置: 修改bin目录下的user.properties文件,追加配置: jmeter.save.sa ...

  2. kmp（前缀出现次数next应用）

    http://acm.hdu.edu.cn/showproblem.php?pid=3336 Count the string Time Limit: 2000/1000 MS (Java/Other ...

  3. Java并发编程：线程的创建

    Java并发编程:线程的创建 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} J ...

  4. BZOJ 5450 轰炸 (强连通缩点+DAG最长路)

    <题目链接> 题目大意: 有n座城市,城市之间建立了m条有向的地下通道.你需要发起若干轮轰炸,每轮可以轰炸任意多个城市.但每次轰炸的城市中,不能存在两个不同的城市i,j满足可以通过地道从城 ...

  5. 【转】sed命令的基本操作

    原文链接 sed命令行格式为:          sed [-option]  ‘command’  输入文本/文件         常用选项:        -n∶取消默认的输出,使用安静(sile ...

  6. JS面向对象——动态原型模型、寄生构造模型

    动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...

  7. foreach与正常for循环效率对比

    foreach foreach编译成字节码之后,使用的是迭代器实现的. foreach特点: 无须获取容器大小 需要创建额外的迭代器变量 遍历期间得到的是对象,没有索引位置信息,因此不能进行赋值操作. ...

  8. SpringBoot集成H2database

    转载:https://blog.csdn.net/chenhao_c_h/article/details/80332260 h2database为我们提供了十分轻量,十分快捷方便的内嵌式数据库 H2是 ...

  9. Scene Text Detection(场景文本检测)论文思路总结

    任意角度的场景文本检测论文思路总结共同点:重新添加分支的创新更突出场景文本检测基于分割的检测方法 spcnet(mask_rcnn+tcm+rescore) psenet(渐进扩展) mask tex ...

  10. Python的list中的选取范围

    a = [1,2,3,4,5,6,7,8,9,10] a[0:1] = [1] a[0:2] = [1,2] 包含开头,不包含结尾. a [:-1]: 从头一直到最后一个元素a[-1],但不包含最后一 ...