职业IT人论坛

 找回密码
 注册

扫一扫,访问微社区

搜索
2019PMP认证备考培训项目管理之家专场百度自然排名1-15天上首页,达标计费,无效退款.500+微信公众号程序模块,免费使用!
查看: 1335|回复: 7

认知:IE6、IE7支持但不完全支持display:inline-block属性

[复制链接]
走失的猫咪 发表于 2011-6-20 16:41 | 显示全部楼层 |阅读模式
发布一个小时后,总感觉不安,查询了一些资料,决定修改本篇。

原文标题是:认知:IE6、IE7的确不识别display:inline-block属性,内容如下:
-------------------------------------自制分割线-----------------------------------------

虽然布局中经常用到display:inline-block,ie6,ie7也确实表现的跟“真”的一样,但是这 哥俩 确实是不识inline-block为何物的。。。

因为我曾经试着对div设置display:inline-block;来布局,FF没有问题,但是ie6不行依然将div解析为block,当时偶觉得是ie的bug。

今天在群里偶然被提起了,一位童鞋提供了一个网址,看了以后深表认同,看到此文的第一句

vapour 写道
在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。



立马就想到了之前div inline-block的尝试,无需犹豫了。

此文写的很清楚了,偶就无需多说,贴上链接,有研究的可以详细参看:

http://www.dovapour.com.cn/article/20090611175.html

  
-------------------------------------自制分割线-----------------------------------------

每个人都有自己的一些认知,建立在当前的基础之上,但是认知可以有进步。

对于这样的原文,感觉不安,于是还是多查点资料确认的好,否则误人误己。

苏昱(Rainer Su)出品的CSS手册,display一节有云:

写道
在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
在IE6.0中开始支持 list-item 。


这样说就是 IE5.5就支持inline-block了,IE6/7当然也支持,但是如何解释  块级元素无法呈现inline-block的效果呢?继续找资料。

找了几篇外国资料,取一个有代表性的:

http://www.quirksmode.org/css/display.html

截图:




IE6/7对于inline-block的支持处于不完全状态:  
写道
In IE 6 and 7 inline-block works only on elements that have a natural display: inline.
意思是说,IE6/7的inline-block属性只对原生默认的内联元素(span, a, em......)有效,对于块级元素(div,p,ul......)无效。

另外一个参考:http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm

写道
IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

那么现在有两个结论:

1、IE6/7不识别inline-block,只是触发了layout,表现跟真实一样。
2、IE6/7不完全支持inline-block,只对内联元素有效。

两者,我更倾向于第二个结论。如果你有更好的证据,请讨论。

不断纠正认知!

大小: 31.7 KB
查看图片附件

北大青鸟 发表于 2011-6-20 16:41 | 显示全部楼层
第1条是正确的。

IE6以前的版本(也包括IE6及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于IE5.5),通过设置任何元素的width/height都可以使其hasLayout。但在IE6/IE7的标准模式中的行内元素上却不行,设置display:inline-block才可以,这时这个行内元素看起来有点像标准浏览器中的行内块,但实际并不是,只是它hasLayout罢了。要达到这个效果,未必一定要用display:inline-block,使用任何能使其hasLayout的办法都行:zoom:1、writing-mode:tb-rl等等。

为什么IE有这个奇怪的东西?
IE早期版本中没有Block formatting context的概念,而是使用hasLayout来达到类似的效果。

关于hasLayout,可以参考:
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.brunildo.org/test/InlineBlockLayout.html

关于Block formatting context,可以参考:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

yoyo 发表于 2011-6-20 16:41 | 显示全部楼层
IE是个杯具的流行产物。对IE6这种应该被淘汰的东东还是不过多研究原因了,结果正确就行。一个清除浮动的例子,IE6可以用zoom:1;来清除浮动,同样display:inline-block;也是可以清除自身浮动的,喜剧的是发现FF3.5.7,Opera10.10也可以用这个来清除自身浮动,脑中没有之前哪位大牛对此做发表的记忆。

Html代码  
<div style="display:inline-block;border:1px solid red;">  
    <p style="float:left;width:200px;height:200px;">外部div有1px的边框,这个段落p向左浮动</p>  
</div>  

<div style="display:inline-block;border:1px solid red;">
        <p style="float:left;width:200px;height:200px;">外部div有1px的边框,这个段落p向左浮动</p>
</div>


郁闷小男人 发表于 2011-6-20 16:42 | 显示全部楼层
或许表述改一下,IE认识display:inline-block;但是只作为触发layout用。。。。。。

无处不在 发表于 2011-6-20 16:42 | 显示全部楼层
http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx

走就走吧 发表于 2011-6-20 16:42 | 显示全部楼层
caiceclb 写道
http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx

点错了,直接就发了出去。。。

找到了官方的说法,应该算是最正宗的了吧。。

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.

以下属性一旦设置,将触发元素的layout:

CSS property Value
display         inline-block
height         any value
float         left or right
position absolute
width         any value
-ms-writing-mode tb-rl
zoom         any value




broken 发表于 2011-8-18 13:38 | 显示全部楼层
有空一起交流一下
我是谁 发表于 2012-3-4 23:33 | 显示全部楼层
支持........
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|手机版|网站帮助|职业IT人 ( 粤ICP备12053935号 )

GMT+8, 2019-1-17 18:56 , Processed in 0.073123 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2018 Comsenz Inc.

快速回复 返回顶部 返回列表