神刀安全网

CSS魔法堂:hasLayout原来是这样的!

前言

过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout。趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑。

hasLayout到底是何方神圣?

hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是用于决定一个元素要么自己对自身内容进行组织和尺寸计算,要么由其containing block来组织和尺寸计算。

当hasLayout为true时(就是所谓的"拥有布局"),相当于元素产生新BFC,元素自己对自身内容进行组织和尺寸计算;

当hasLayout为false时(就是所谓的"不拥有布局"),相当于元素不产生新BFC,元素由其所属的containing block进行组织和尺寸计算。

和产生新BFC的特性一样,hasLayout无法通过CSS属性直接设置,而是通过某些CSS属性间接开启这一特性。不同的是某些CSS属性是以不可逆方式间接开启hasLayout为true。并且默认产生新BFC的只有 html 元素,而默认hasLayout为true的元素就不只有 html 元素了。

另外我们可以通过 object.currentStyle.hasLayout 属性来判断元素是否开启了hasLayout特性。

到这里我们应该了解到若要理解hasLayout则必须理解BFC,因此这里可参考 CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

默认 hasLayout==true 的元素

<html>, <body> <table>, <tr>, <th>, <td> <img>,<hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet>,<marquee>

触发 hasLayout==true 的方式

display: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值)

IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout :

min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值,仅用于块级元素) overflow-x: (除 visible 外任意值,仅用于块级元素) overflow-y: (除 visible 外任意值,仅用于块级元素) position: fixed

IE6 以前的版本(也包括 IE6 及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于 IE 5.5), 通过设置任何元素的 ‘width’ 或 ‘height’(非auto)都可以触发 hasLayout ; 但在 IE6 和 IE7 的标准模式中的行内元素上却不行,设置 ‘display:inline-block’ 才可以。

其中通过 display:inline-blockmin-width:0min-height:0 将不可逆地启用hasLayout特性。而在没有其他属性启用hasLayout时,可通过以下方式关闭hasLayout

max-width, max-height (设为 "none")(在IE7中) position (设为 "static") float (设为 "none") overflow (设为 "visible") (在IE7中) zoom (设为 "normal") writing-mode (从 "tb-rl" 设为 "lr-t")

而产生新BFC的CSS属性

position:absolute/fixed float:left/right display:inline-block/table-cell/table-caption/flex/inline-flex overflow:(除visible外任意值)

可以看到导致产生新BFC的方式和触发 hasLayout==true 的方式不完全重叠。因此hasLayout==true所引发的问题,很大程度可以理解为在不应该的或没有预料到的地方产生新的BFC导致的。

如何兼容?

仅当一个元素即在 IE 早期版本中触发了 hasLayout,又在其他浏览器中创建了 block formatting context 时,才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容,或者相反,两者皆不启用。

  1. 使元素即生成了 block formatting context,又触发了 hasLayout对于触发 hasLayout 的元素,通过 CSS 设置,使它产生 block formatting context;

  2. 生成 block formatting context 但是没有触发 hasLayout 的元素,通过设置 ‘zoom:1’,使其触发 hasLayout。

  3. 使元素即没有触发 hasLayout,又没有创建 block formatting context。

总结

虽然我现在已经不用再适配IE5.5/6/7了,但理解hasLayout还是很有必要的。其实可以理解为从另一个角度学习BFC吧!尊重原创,转载请注明来自:肥仔john^_^

感谢

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CSS魔法堂:hasLayout原来是这样的!

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮