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

hasLayout

标签：

原文地址：http://www.cnblogs.com/dragonlong/p/4650916.html