• haslayout详解


    介绍

    IE中很多奇怪的渲染问题可以通过赋予其“layout”得到解决。这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?

    定义

    “layout”是一个IE/WIN的私有概念,决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。这种渲染特性可以通过某些CSS属性被不可逆转地触发。而有些HTML元素则默认就具有“layout”。

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

    很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。

    微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 layout , 也就是 hasLayout。

    hasLayout 其实既不是一个属性更不是一个行为,而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念,在这个概念下渲染的元素将具有一种特性。

    实际上这种渲染特性在有些 javascript:;" onClick="javascript:tagshow(event, 'HTML');" target="_self">HTML 元素中与身俱来,hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态,将其触发为 true ,且一旦触发将不可逆转。

    下面列出可以触发hasLayout的一些CSS属性值。

    激活layout

    position:absolute   设置绝对定位可能会引发新的问题

    float:left|right    IE下的浮动也会产生一些莫名其妙的问题

    display:inline-block     当一个内联元素需要haslayout属性时就需要用它,但是IE本身不支持inline-block的,只是表现得像标准里说的inline-block

      除“auto”外的任意值

    height:  除“auto”外的任意值

        对IE6及更早版本来说很常用,该方法被称为霍莉破解(Holly hack),即设定这个元素的高度为1%。但是要注意,当这个元素的overflow属性被设置为visible时,这个方法就失效了。

    zoom:   除“normal”外的任意值

        有一个IE的私有属性,不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用。

    writing-mode:tb-rl    IE私有属性

    IE7还有一些额外的属性:

    min-height:(任意值)

    max-height:(除none外任意值)

    min- (任意值)

    max- (除 none 外任意值)

    overflow: (除 visible 外任意值)

    overflow-x: (除 visible 外任意值)

    overflow-y: (除 visible 外任意值)

    position: fixed

    重置haslayout

    在没有其它属性激活layout的情况下,使用下面的css可以重置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 属性时,就算在一条独立的规则中覆盖这个属性为"block"或"inline",haslayout 这个标志位也不会被重置为 false。

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

    有关内联级别元素

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

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

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

    http://www.54xue.com/w/15/n-515.html

  • 相关阅读:
    GNU C与ANSI C的不同
    在 Windows 上使用 Cygwin
    VS2010程序调试
    VS2010中visual assist x的一些问题
    专访TK教主于旸:原来那些搞安全的说的都是真的(图灵访谈)
    程序员必看的书
    msp430学习笔记-时钟及延时函数
    指针函数与函数指针
    msp430学习笔记-IO及低功耗
    运算符优先级常识
  • 原文地址:https://www.cnblogs.com/laborc/p/3069354.html
Copyright © 2020-2023  润新知