在低版本IE中,比如IE6、7,经常会出现一些奇葩的bug,其表现跟高级浏览器的表现不一致。原因之一是IE显示引擎使用一个称为布局(layout)的内部概念
所以要解决bug,首先得了解一下“layout”的概念
什么是layout?
layout也称为布局,是IE的一个私有的内部概念。IE使用布局概念来控制元素的尺寸和定位。那些称为拥有布局的元素负责本身及其子元素的尺寸和定位。如果一个元素没有拥有布局,那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
哪些元素本身就拥有布局?
- body
- 标准模式中的 html
- table
- tr, td
- img
- hr
- input, select, textarea, button
- iframe, embed, object, applet
- marquee
没有布局的元素如何可以拥有布局?
设置以下CSS 属性会自动地使元素拥有布局
- position: absolute | fixed
- float: left | right
- display: inline-block
- width: 除auto外的任何值
- height: 除auto外的任何值
- zoom: 除normal外的任何值
- writing-mode: tb-rl ( IE私有值 tb-rl )
- overflow:hidden | scroll | auto
- overflow-x|-y: hidden | scroll | auto
- min-width:任何值 ( 即使设置为 0 也会是layout=true )
- max-width:除none之外的任何值
- min-height:任何值
- max-height:除none之外的任何值
当在FF和IE中表现不一致时,我们可以尝试通过设置css属性去触发haslayout属性,看看问题出在哪,常用的方法有:
1、height:1%;(IE5-6的所有版本)
该方法在 Holly Hack霍莉破解 中用到 ,注意:当这个元素的overflow属性被设置为visible时,这个方法就失效了
2、height:0; (IE6以及它以下的版本)
3、min-height:0;(IE7)
4、display:inline-block;
5、zoom:1 ;
个人比较喜欢用zoom:1
在大多数情况下,它能在不影响现有环境的条件下触发元素的haslayout,一旦问题消失,那基本上就可以判断是haslayout的原因了。
然后就可以通过设定相应的css属性来修正问题。