• 实战haslayout(理论篇)!


    一、什么是Layout

    触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器,可以设置宽高而且不受外部元素的影响,类似于现代浏览器中的 Block formatting contexts (块级格式化上下文)的概念。

    产生 hasLayout 的元素之间表现出来互不影响

    IE 的 hasLayout,具有独立性,所以产生 hasLayout 的元素之间表现出来互不影响(即原来是什么样子,haslayout之后还是什么样子,原来有空隙,以后还有,原来没有,之后也没有。)。这也再次表明 IE6、7 中的 inline-block 不能等同于 CSS2.1 中的 inline-block。

    layout,布局的意思!它决定了一个对象(就是一个标签div、li等)在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。可以被一些css强制激活当一个对象的layout属性被激活,它的具体表现就是haslayout=true。我们可以用IE Developer Toolbar工具,看到被激活的对象带有"haslayout = -1"的属性。

    下面这些标签默认拥有haslayout=true:

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

    二、微软干嘛要设layout这个东西呢?

    当一个对象的layout被激活时,它以及它的子对象的定位和尺寸计算将独立进行,不受附近对象的干扰。也就是说它拥有一个独立的布局(即haslayout=true)。因此浏览器要花费更多的代价来处理拥有haslayout的对象的位置尺寸等信息。为了提高性能,微软增加了layout这个IE私有的概念。

    一旦一个元素有了这个属性——hasLayout=true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

    也就是说轻易不要激活这个layout!但是,很多情况下,我们把 hasLayout的状态改成true,就是激活layout,可以解决很大部分ie下显示的bug。

    三、怎样激活与重置layout?

    话说hasLayout属性不能直接设定为true,你只能通过设定一些特定的css属性来触发它。

    下面列出的css属性可以激活对象的layout:

    ----------------------------------------------------
    display
    启动haslayout的值:inline-block
    取消hasLayout的值:其他值

    display 属性的不同:当用"inline-block"激活了haslayout 属性时,就算在一条独立的规则中覆盖这个属性为"block"或"inline",haslayout 这个标志位也不会被重置为 false。
    -----------------------------------------------------
    width/height
    启动hasLayout的值:除了auto以外的值
    取消hasLayout的值:auto

    对 IE6 及更早版本来说很常用,该方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1% (height:1%;)。但是要注意,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。
    ------------------------------------------------------
    position
    启动hasLayout的值:absolute        设置绝对定位可能会引发新的问题。
    取消hasLayout的值:static
    -------------------------------------------------------
    float
    启动hasLayout的值:left或right     IE下的浮动也会产生一些莫名其妙的问题。
    取消hasLayout的值:none
    ------------------------------------------------------
    zoom
    启动hasLayout的值:有值      除'normal'外的任意值
    取消hasLayout的值:narmal或者空值

    zoom是微软IE6、7的专有属性,不兼容标准,可以触发hasLayout但不会影响页面的显示效果。zoom:1可以在测试或者不追求标准的情况下使用,效果不错
    -------------------------------------------------------
    writing-mode: tb-rl
    这也是微软专有的属性。从 "tb-rl" 设为 "lr-t"即可取消

    -------------------------------------------------------
    ie7还有一些额外的属性可以触发该属性(不完全列表):
    min-height: (任何值)
    max-height: (任何值除了none)
    min- (任何值)                   在 IE 7 中设为 "none"即可取消
    max- (任何值除了none)      在 IE 7 中设为 "none"即可取消
    overflow: (任何值除了visible)       在 IE 7 中设为 "visible"
    overflow-x: (任何值除了visible)
    overflow-y: (任何值除了visible)5
    position: fixed

     -------------------------------------------------------

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

    下边具体来实战一下

  • 相关阅读:
    HTML <a> 标签的 target 属性
    CSS display 属性
    test
    ubuntu开启ssh服务
    Ubuntu各个版本的介绍
    Ubuntu和RedHat的区别
    黑苹果Mac系统快捷键修改
    安装Ubuntu 8.04 Server
    VirtualBox虚拟机网络设置(转)
    修改eclipse的背景色(转载)
  • 原文地址:https://www.cnblogs.com/sxwkt/p/2960954.html
Copyright © 2020-2023  润新知