【转】关于IE的hasLayout

IE的haslayout是个比较麻烦的东西，首先它不是w3c的标准属性，没有一个专门的css命令能设定layout，元素要么本身就具有layout，要么需要通过一个css属性“偷偷的”触发layout。其次触发ie的haslayout 的属性比较不常用。用haslayout解决问题的时候，大部分人也是迷迷糊糊的。这里就专门介绍下ie的haslayout，希望对大家有所帮助。

     ie很多稀奇古怪的渲染上的bug都可以用layout属性来解决，"layout"决定了一个元素该如何显示以及约束其包含的内容，以及同其他元素交互和建立联系。响应和传递应用程序事件和用户事件等。这些渲染特性可以通过某些CSS特性被不可逆转的触发。（下面会介绍响应的css）

     当我们说一个元素“得到layout”或者“拥有layout”的时候是指：它的微软专有特性 haslayout  此时被设置为ture。

     一个元素是否有layout可能会引发下面的一些问题：

       第一：IE常见的浮动bug；

       第二：元素本身的一些属性异常处理；

       第三：容器及其子孙空白边重叠的情况；

       第四：实用列表时碰到的诸多问题；

       第五：背景图定位时偏差问题；

       第六：js时用到的浏览器处理不一致的问题；

   下面的标签，默认就具有layout

    

  • <html>, <body>

  • <table>, <tr>, <th>, <td>

  • <img>

  • <hr>

  • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>

  • <iframe>, <embed>, <object>, <applet>

  • <marquee>

 下列 CSS 属性和取值将会让一个元素获得 layout：

  • position: absolute
    绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。

  • float: left|right
    由于 layout 元素的特性，浮动模型会有很多怪异的表现。

  • display: inline-block
    当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。"inline-block行为"在IE中是可以实现的，但是需要注意的是： IE/Win: inline-block and hasLayout 。

  • width: 除 “auto" 外的任意值
    很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。

  • height: 除 “auto" 外的任意值
    height: 1% 就在 Holly Hack 中用到。

  • zoom: 除 “normal" 外的任意值
    IE专有属性。不过 zoom: 1 可以临时用做调试。

  • writing-mode: tb-rl
    MS专有属性。

  • overflow: hidden|scroll|auto
    在 IE7 中，overflow 也变成了一个 layout 触发器，这个属性在之前版本 IE 中没有触发 layout 的功能。

  • overflow-x|-y: hidden|scroll|auto
    overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。

  • 另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。

  • position: fixed

  • min-width: 任意值
    就算设为0也可以让该元素获得 layout。

  • max-width: 除 “none" 之外的任意值

  • min-height: 任意值。即使设为0也可以让该元素的 haslayout=true

  • max-height: 除 “none" 之外的任意值

        对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)

  • width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。

  • zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

      具有"layout" 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block （inline-block在chrome，safari，opera中支持，其他浏览器不支持）很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

    

    重置haslayout的方法:

    重设以下属性为默认值将重置(或撤销)hasLayout，如果没有其他属性再添加 hasLayout 的话：

  • width, height (设为 “auto")

  • max-width, max-height (设为 “none")(在 IE 7 中)

  • position (设为 “static")

  • float (设为 “none")

  • overflow (设为 “visible") (在 IE 7 中)

  • zoom (设为 “normal")

  • writing-mode (从 “tb-rl" 设为 “lr-t)

display 属性的不同：当用"inline-block"设置了 haslayout = true 时，就算在一条独立的规则中覆盖这个属性为"block"或"inline"，haslayout 这个标志位也不会被重置为 false。

把 mid-width, mid-height 设为它们的默认值"0″仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性"auto"来重置 hasLayout

posted @ 2012-06-24 13:43  丛子  阅读(158)  评论(0)  编辑  收藏  举报