`
guoyiqi
  • 浏览: 1009975 次
社区版块
存档分类
最新评论

【hasLayout触发方式】和【hasLayout——IE中css bug的罪魁祸首】(转自:http://hi.baidu.com/oxid/blog/item/8481e6a28128b3a0caefd044.html 和 http://www.k6

 
阅读更多

【hasLayout触发方式】

IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。具体情况如下:

  1. bodyimgtabletrthtd等元素的hasLayout一直为true
  2. typetextbuttonfileselectinputhasLayout一直为true
  3. 设置{position:absolute}的元素的hasLayouttrue
  4. 设置{float:left|right}的元素的hasLayouttrue
  5. 设置{display:inline-block}的元素的hasLayouttrue
  6. 设置{height:xx}{width:xx}的元素必须具体以下两个条件之一,其hasLayout才能为true
    1. IE8兼容模式和IE8以前的浏览器中,在标准(strict)模式下其display的值是block,如demo3就不行。
    2. 元素在怪癖模式(compat mode)下。
  7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayouttrue,但在IE8的标准模式下则不会触发hasLayout
  8. 设置了{writing-mode:tb-rl}的元素的hasLayouttrue
  9. 元素的contentEditable的属性值为true
  10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true,如demo8

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” OverviewOn having layout

http://dancewithnet.com/2009/09/06/css-opacity/
http://striblog.com/?p=13
http://hi.baidu.com/lijing00333/blog/item/bbfdd21424f5535bf2de3267.html
【hasLayout——IE中css bug的罪魁祸首】

什么是hasLayout?

要想更好的理解css,尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)。
通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。

什么情况下hasLayout不会出现?

一般情况都不会出现,当然除了下面罗列的默认具有hasLayout的元素和使用特定样式触发以外;
它会带来各种诡异表现,当你发现IE7-出现了一些不可思议的问题,首先要检查的就是是否是hasLayout在捣鬼;
hasLayout只出现在IE7及更早版本中,IE8不存在hasLayout解析模式,我们只讨论指定doctype的情况。

hasLayout的触发条件:

* position: absolute(IE5+)
* float: left|right(IE5+)
* display: inline-block(IE5+)
* width: “auto”以外的任何值(IE5+; 对inline元素无效)
* height: “auto”以外的任何值(IE5+; 对inline元素无效)
* zoom: “normal”以外的任何值(IE5.5+; IE私有属性)
* writing-mode: tb-rl(IE5+; IE私有属性)
* overflow: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不能应用在未触发hasLayout的元素上)
* overflow-x|-y: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不触发hasLayout; 此属性在CSS3中才获支持)
* min-width: 任何值(IE7; 即使是0)
* max-width: “none”以外的任何值(IE7)
* min-height: 任何值(IE7)
* max-height: “none”以外的任何值 (IE7)
* position: fixed(IE7)

清除或重置hasLayout:

* position: static(IE5+)
* float: none(IE5+)
* display: “inline-block”以外的任何值(IE5+)
* width|height: “auto”(IE5+; 对inline元素无效)
* zoom: “normal”(IE5.5+; IE私有属性)
* writing-mode: 从’tb-rl’到’lr-tb’(IE5+; IE私有属性)
* max-width|max-height: “none”(IE7)
* overflow: visible(IE7)

haslayout 问题的调试与解决

当网页在ff中表现正常,而在 IE7 或更早版本中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定zoom:1。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性,其次再考虑其他属性。
对于IE7 ,最好的办法是设置最小高度属性为0;这个技术是无害的,因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。
对 IE6 及更早版本来说,常用的方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1%(height:1%;)。需要注意的是,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。或者使用 IE的条件注释。

分享到:
评论

相关推荐

    IE 常见bug 及其fix

    在Web开发领域,Internet Explorer(IE)曾是程序员们的一大挑战,尤其是对于前端开发者来说,因为IE中存在许多特有的bug。这些bug不仅让开发者头疼,还严重影响了开发效率。本篇将详细介绍9个最常见的IE bug及其...

    常见 CSS BUG 的处理

    **IE5/6 Doubled Float-Margin Bug**:在 IE5 和 IE6 中,当一个浮动元素紧挨着另一个设置了外边距的元素时,可能会出现外边距加倍的问题。 **解决方法**: - 使用 `display: inline` 来让元素表现得像内联元素一样...

    Web-前端html+css从入门到精通 168. IE低版本常见BUG.zip

    IE低版本常见BUG.zip"专门针对这一主题,提供了关于如何解决IE低版本(如IE6、IE7、IE8)中的常见BUG的教学内容。 首先,我们需要理解的是,IE低版本对HTML5新特性的支持非常有限,因此在编写HTML时,需要谨慎使用...

    IE6, IE7, IE8 CSS 兼容速查表

    这份“IE6, IE7, IE8 CSS 兼容速查表”就是为了解决这一问题而编写的,它提供了关于这些浏览器中CSS特性的详尽对比和解决方案。 1. **CSS盒模型差异**:IE6、7采用了独特的盒模型,其中`width`属性包含了边框和内...

    IE6 CSS高度height:100% 计算失效/无效

    总之,`height: 100%` 在IE6中的失效是由于浏览器的局限性和不完整的CSS实现导致的。理解这个限制并采用适当的解决策略,可以有效地避免此类问题,确保在各种浏览器环境中提供一致的用户体验。在开发过程中,利用...

    hasLayout引发的CSS Bug表

    本文将详细探讨由IE浏览器特有的hasLayout属性引发的CSS Bug表,涉及的知识点包括hasLayout的定义、特点、触发条件以及具体的Bug案例和解决方案。为了便于理解,我们将分几个部分阐述这些知识点。 首先,hasLayout...

    css浏览器兼容整理

    - IE6中的盒模型计算方式与其他浏览器不同,需要调整 `padding` 和 `border` 的处理方式来保持一致性。 2. **页面的最小宽度** - 可以通过 `min-width` 属性来设置最小宽度。 3. **为什么无法定义1px左右高度的...

    ie6BUG解决方案

    在IT行业中,尤其是在网页开发领域,IE6(Internet Explorer 6)因其众多独特的浏览器兼容性问题而闻名。作为一款已过时的浏览器,它在处理CSS(层叠样式表)、JavaScript和其他Web技术时存在诸多不一致性和漏洞,给...

    ad.css for IE

    4. `display`属性:在处理浮动元素和清除浮动时,IE可能会有特殊的显示问题,例如`display:inline-block`在IE7中不起作用,可能需要使用`zoom:1`来触发hasLayout。 5. `position`属性:在定位元素时,IE和现代...

    bootstrap兼容IE6的css

    1. **CSS Hack**: 由于不同浏览器对CSS的解析方式存在差异,为了确保在IE6和IE7中正确显示,需要使用特定的CSS Hack。例如,`_width` 仅在IE6下生效,`*zoom` 可用于触发IE的hasLayout特性,`<!--[if lt IE 9]>` ...

    CSS之IE BUG分析与解决

    本文主要探讨了几个常见的CSS在IE浏览器中的BUG及其解决方案。 1. **错误的扩展与min-height** - 在IE6中,设定`height`或`width`为固定值时,如果内容超出这个值,div会自动扩展,而在其他标准浏览器中,div的...

    CSS兼容性技巧整理

    在网页设计和前端开发中,不同浏览器对CSS的支持程度存在差异,特别是在早期版本的Internet Explorer(如IE6和IE7)与现代浏览器(如Firefox)之间。这些差异可能导致布局错乱、样式不一致等问题,因此掌握一定的CSS...

    css样式BUG大全

    `来触发IE的`hasLayout`属性,从而解决某些布局问题。 以上就是关于CSS样式BUG的一些常见问题及其解决方案。理解这些BUG的原因并掌握正确的解决方法对于提高Web页面的兼容性和用户体验至关重要。

    css_bug与解决方法

    在Web开发中,CSS(层叠样式表)是实现网页美观设计的关键技术之一,但不同浏览器对CSS的支持程度和解析方式存在差异,这往往导致CSS bug的出现。了解这些bug并掌握相应的解决策略,对于提升网页的兼容性和用户体验...

    IE下css if条件

    标题中的“IE下css if条件”指的是在Internet Explorer(IE)浏览器中,由于CSS标准的不完全支持,开发者经常需要使用一些特殊的技巧来实现特定条件下的样式应用。这些技巧通常被称为CSS Hack,用来解决IE和其他现代...

    最常见web前端开发面试题(五)

    5. XHTML和CSS的注释方式: - XHTML: `<!-- 这是XHTML的注释 -->` - CSS: `/* 这是CSS的注释 */` 6. 缩写方法写出1px直线(实线)灰色(假设灰色代码值为#333)的无边框矩形边框样式: ```css .rectangle { ...

    ie特有bug文档

    ### IE特有Bug知识点解析 #### 一、概述 Internet Explorer(简称IE)作为曾经市场上最主流的浏览器之一,在其发展过程中积累了一系列特有的兼容性问题。这些问题是由于IE浏览器自身的技术限制以及对某些Web标准的...

    CSS浏览器兼容问题整理

    - 解决方案是使用`zoom: 1`触发IE特有的`hasLayout`属性,从而使其能够正确识别百分比高度。 - 示例代码: ```css #container { position: relative; zoom: 1; /* 触发IE特有的hasLayout */ min-width: 600px...

Global site tag (gtag.js) - Google Analytics