`
deng131
  • 浏览: 675186 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

IE中hasLayout属性布局问题

阅读更多
IE中 Internet Explorer for Windows的私有概念,有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”,意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。

元素是否具有”layout”可能会引发如下的一些问题:

* IE 很多常见的浮动臭虫。
* 元素本身对一些基本属性的异常处理问题。
* 容器和其子孙之间的空白边重叠问题。
* 使用列表时遇到的诸多问题。
* 背景图像的定位偏差问题。
* 使用脚本时遇到的浏览器之间处理不一致的问题。


下列元素应该是默认具有 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” 之外的任意值


参考:

http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/
http://adamghost.com/2008/12/ie-haslayout-%E8%AF%A6%E8%A7%A3/
http://www.cnblogs.com/rubylouvre/archive/2010/12/11/1900826.html
分享到:
评论

相关推荐

    详解IE浏览器的haslayout属性及相关兼容性问题解决

    "Layout" 是 IE 的一个私有属性,并不是W3C标准。它决定了一个对象(就是一个标签div、li等)在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。 这个属性可以被一些css强制激活。一些...

    在IE浏览器下出发CSS的haslayout属性

    在IE浏览器中,CSS的`haslayout`属性是一个独特的概念,它是Windows Internet Explorer渲染引擎的内部机制,主要用于控制元素的尺寸和定位。由于IE浏览器在处理页面布局时存在一些与众不同的行为,`haslayout`成为了...

    深入解析IE浏览器专有的CSS属性hasLayout

    一.hasLayout 是什么?hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer 中,元素使用“布局”概念...简而言之,hasLayout 只是一个 IE 下专有的属性,hasLayout 为 true 的元

    DIV+CSS网页中IE和火狐兼容问题的整理

    - IE特有的hasLayout机制可能导致布局问题,例如`width: auto`和`height: auto`在某些情况下不生效。 解决方法:通过设置`zoom: 1`或`position: relative`触发hasLayout。 在处理这些兼容性问题时,开发人员应...

    CSS haslayout 彻底了解

    比如,一个常见的问题是双倍边距BUG(即在IE中使用margin时出现比预期效果加倍的边距),这类问题通常可以通过设置display:inline-block或触发hasLayout属性来解决。 在IE中,调试时可利用开发者工具栏的...

    ie6中页面的bug

    5. **字符重复问题**:在复杂布局中,浮动元素内的文本可能会出现在清除浮动的元素下方。为了解决这个问题,可以确保浮动元素设置`display: inline`,或者在浮动元素末尾添加特定的CSS注释,或者在最后的元素后面...

    网页排版IE6兼容性问题修改方法

    IE6特有的hasLayout机制,当元素满足某些条件时,会自动计算其尺寸,可能导致布局问题。可以通过设置`width`、`height`、`zoom`等属性触发或避免hasLayout。 6. **CSS选择器限制** IE6对CSS高级选择器(如`:hover...

    DIV在IE6中被下拉菜单占据的问题

    3. **使用hasLayout属性**:IE6中有一些元素拥有一个称为“hasLayout”的内部属性,当元素满足特定条件时,如宽度和高度被指定,它将自动开启。给`&lt;div&gt;`添加`zoom:1`可以触发hasLayout,有时这足以解决问题。 4. *...

    IEtest 5-8 css样式兼容

    2. 浮动:IE的浮动元素可能会引起父元素高度塌陷,需要使用`hasLayout`属性或者添加clearfix类来解决。 3. 定位:IE6不支持`position:fixed`,开发者可能需要使用`position:absolute`和`expression`脚本来模拟固定...

    hasLayOut与css属性的关系介绍

    总结来说,虽然“hasLayout”与CSS属性的关系在IE浏览器历史版本中扮演了重要角色,但随着Web标准的发展,我们应聚焦于更现代的布局方法,以构建更兼容、更易于维护的网页布局。同时,了解“hasLayout”的原理对于...

    IE下css if条件

    4. **HTML元素的CSS hack**:比如,`&lt;table&gt;`元素在IE6中默认的`hasLayout`属性会导致一些布局问题,可以使用`*html table {height:1%;}`来触发IE6的`hasLayout`。 5. **滤镜(filter)属性**:IE特有的滤镜属性,...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    更进一步,针对IE浏览器,尤其是IE7,可以通过触发hasLayout属性来模拟inline-block的效果。IE浏览器中的hasLayout是一个内部的、用于控制布局的特殊属性。一些元素(如input、img)会自然地拥有这个属性,而有些...

    ie6十大兼容性问题

    IE6 和 IE7 中存在许多渲染问题,这些问题可以通过激活元素的 `hasLayout` 属性来解决。这个特性允许浏览器正确地理解元素的边界和位置,特别是在需要将行内元素变为块级元素或者实现透明效果时尤为重要。 **示例:...

    H5面试汇总(含答案)最新版).docx

    IE haslayout 属性是 Windows Internet Explorer 渲染引擎的一个内部组成部分。hasLayout 属性可以为 true 或 false。当一个元素的 hasLayout 属性值为 true 时,我们说这个元素有一个布局(layout)部分。可以通过...

    CSS之IE BUG分析与解决

    - IE6中的`hasLayout`机制可能导致布局问题,表现为元素尺寸计算不正确。通过设置`zoom:1;`或改变元素的某些属性(如`width`、`height`、`float`等)可以触发`hasLayout`,从而解决问题。 8. `lay-out`错误 - 在...

    hasLayout引发的CSS Bug表

    3. IE6和IE7中,包含hasLayout属性的标签默认具有高度。 4. 在form元素中,如果父元素包含hasLayout属性,子元素如input或textarea出现加倍的margin-left。 5. IE6和IE7中,父元素设置overflow: hidden或auto时,其...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    在实际开发中,还需要注意其他一些CSS属性,如`hasLayout`、`zoom`、`filter`等,它们在IE中也有独特的行为。解决这些问题通常需要对浏览器的解析机制有深入的理解,并掌握一些CSS Hack技巧,如条件注释、星号前缀等...

Global site tag (gtag.js) - Google Analytics