美文网首页
深入理解IE haslayout

深入理解IE haslayout

作者: foolgry | 来源:发表于2016-11-19 17:32 被阅读0次

    转载自Bubblings Blog
    原文地址:http://riny.net/2013/haslayout/

    1.什么是haslayout

    layout是windows IE的一个私有概念,它决定了元素如何对其内容定位和尺寸计算,以及与其他元素的关系和相互作用。当一个元素“拥有布局”时,它会负责本身及其子元素的尺寸和定位。而如果一个元素“没有拥有布局”,那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

    必须说明的是,IE8及以上浏览器使用了全新的显示引擎,已经不在使用haslayout属性,因此文中提到的haslayout属性只针对IE6和IE7。

    2.为什么会有haslayout

    理论上说,每个元素都应该控制自己的尺寸和定位,即每个元素都应该“拥有布局”,当然这只是理想状态。而对于早期的IE显示引擎来说,如果所有元素都“拥有布局”的话,会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销,即只将布局应用于实际需要的那些元素,所以便出现了“拥有布局”和“没有拥有布局”两种情况。

    3.默认情况下拥有布局的元素

    下面,先来看下哪些元素在默认情况下就“拥有布局”。

    html, body
    table
    tr, td
    img
    hr
    input, select, textarea, button
    iframe, embed, object, applet
    marquee
    

    4.查看和触发haslayout

    haslayout是IE私有的,而且它不是css属性,我们无法通过css显式的设置元素的haslayout。但我们可以通过javascript来查看一个元素是否拥有布局:

    <div id="div1">这是一个div</div>;
    
    var oDiv = document.getElementById('div1');
    alert(oDiv.currentStyle.hasLayout);    //弹出false
    

    如果元素拥有布局,obj.currentStyle.hasLayout就会返回true,否则返回false。hasLayout是一个只读属性,所以也无法通过javascript进行设置。

    在实际开发过程中,很多IE下(IE6、IE7)的显示问题,都可以通过触发元素的haslayout来解决,下面列出一些常见的可以触发元素haslayout的属性和方法:

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

    在IE7中,以下属性也可以触发元素的haslayout

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

    5.haslayout引起的bug及解决方法

    IE 很多常见的浮动 bug 。
    元素本身对一些基本属性的异常处理问题。
    相对定位的元素没有布局。
    拥有布局的元素外边距不叠加。
    ……

    当然可能还有一些我们没有发现的bug,一般情况下我们会使用zoom: 1;来触发haslayout从而来解决这些bug,因为zoom: 1不会影响到元素的现有表现,虽然zoom: 1无法在IE5.0中触发haslayout,但是IE5.0已经不在我们的测试范围内了,所以可以放心的使用zoom: 1。另外在IE6及较早版本的浏览器中还可以使用height: 1%来触发,IE7中可以使用min-height: 0来触发。

    参考文章:

    http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html
    http://www.smallni.com/haslayout-block-formatting-contexts/

    相关文章

      网友评论

          本文标题:深入理解IE haslayout

          本文链接:https://www.haomeiwen.com/subject/pokepttx.html