注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

朱文龙(Z.Mofei)的blog

当你能飞的时候就不要放弃飞翔。

 
 
 

日志

 
 

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

2012-03-12 15:51:12|  分类: 【前端】CSS&HTMl |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

发布一个小时后,总感觉不安,查询了一些资料,决定修改本篇。

 

原文标题是:认知: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

 

截图:

 

 alt

 

 

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,只对内联元素有效。

 

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

 

不断纠正认知!

  评论这张
 
阅读(718)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017