hasLayout

在低版本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属性来修正问题。

posted @ 2015-07-16 15:01  北极星光  阅读(133)  评论(0编辑  收藏  举报