ie下的布局（layout）和拥有布局（hasLayout）

Posted 2020-08-09

我们都知道ie浏览器和其他一些浏览器有很多表现不同的地方，这确实让人头疼，ie的表现与其他浏览器不同的原因之一就是我们今天要说的这个熟悉又陌生的东西：layout是一个专门针对显示引擎内部工作方式的概念（听起来好像很官方），布局问题是许多ie显示bug的根源。

另外在清除浮动的时候也经常提出触发haslayout，关于清除浮动的内容，戳这里！

windows上的ie使用布局概念减少它的处理开销。在理想情况下，所有元素都控制自己的尺寸和定位，但是在ie中不是全部的元素都可以控制自己的尺寸和定位，当然，这并不是没有原因的，官方给出的解释是：这样会在ie中导致很大的性能问题，ie开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能的开销。

如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

在默认情况下，ie中本身自己就拥有布局的元素包括：

• body
• html(标准模式)
• table
• tr、td
• img
• hr
• input、select、textarea、button
• iframe、embed、object、applet
• marquee

 

布局的概念是ie特有的，他不是css属性，但是可以通过javascript获取到hasLayout，这是一个只读属性，不可以设置，所以我们不能用js来设置这个属性。

但是我们可以通过设置一些css属性来使没有拥有布局的元素自动拥有布局，我们可以通过设置下面这些属性：

• float: left|right;
• display: inline-block;
• width: any;
• height:any;
• zoom:any;           //  用zoom来触发haslayout的扩展内容，戳这里！
• writing-mode:tb-rl;

在ie7中以下的属性也成了布局触发器。

• overflow: hidden、scroll、auto
• min-width: any
• max-widht: 除了none以外的任何值

最后在张鑫旭的博客中我看到了一些对layout的不同见解（传送门）