码迷,mamicode.com
首页 > 其他好文 > 详细

如何实现浏览器兼容版的inline-block显示

时间:2016-05-11 11:05:55      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

display:inline-block兼容的问题,网上的答案最多的就是:

display:inline-block;

*display:inline;

*zoom:1;

  知其然知其所以然,那么为什么要这么做。在IE浏览器中,元素有一个haslayout属性(haslayout只能被触发,不能修改为IE浏览器规定以外的其他值),属性值可以为true或false。当一个元素的 haslayout属性值为true时,这个元素就有一个layout,当一个元素拥有一个layout时,它就能对自己和子孙元素进行尺寸计算和定位,这就意味着这个元素需要花更多的代价来维护自身和子孙元素。当一个元素“拥有layout”或“得到layout”,或者说一个元素“has layout”的时候,那么它的IE浏览器属性 haslayout 被设为了true 。一个“layout元素”可以是一个默认就拥有haslayout属性的元素或者是一个通过设置某些CSS属性得到haslayout 的元素。如果某个HTML元素拥有haslayout属性,那么这个元素的 haslayout的值一定为true。

  现在知道了在IE浏览器中元素只要触发了元素的haslayout属性,它就能对自己和子孙元素进行尺寸计算和定位。那么怎么才能触发haslayout属性呢?(请看http://blog.sina.com.cn/s/blog_51048da701018o29.html)(以下内容引用自http://blog.sina.com.cn/s/blog_51048da701018o29.html)

display 
启动haslayout的值:inline-block 
取消hasLayout的值:其他值 
-------------------------------------- 
width/height 
启动hasLayout的值:除了auto以外的值
取消hasLayout的值:auto
 ( 对 IE6 及更早版本来说很常用,该方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1% (height:1%;)。但是要注意,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。)
--------------------------------------- 
position 
启动hasLayout的值:absolute 
取消hasLayout的值:static 
---------------------------------------- 
float 
启动hasLayout的值:left或right 
取消hasLayout的值:none 
--------------------------------------- 
zoom 
启动hasLayout的值:有值 
取消hasLayout的值:narmal或者空值 
(又一个ie私有属性,不兼容标准。)
 
ie7还有一些额外的属性可以触发该属性(不完全列表): 
min-height: (任何值) 
max-height: (任何值除了none) 
min-width: (任何值) 
max-width: (任何值除了none) 
overflow: (任何值除了visible) 
overflow-x: (任何值除了visible) 
overflow-y: (任何值除了visible)
position: fixed 

 

如何实现浏览器兼容版的inline-block显示

标签:

原文地址:http://www.cnblogs.com/webpure/p/5480878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!