【hasLayout触发方式】
IE中的HTML元素要实现透明,则其必须具备layout,这样的元素有仅可读的属性hasLayout,且其值为true。具体情况如下:
-
body 、img 、table 、tr 、th 、td 等元素的hasLayout 一直为true 。
-
type 为text 、button 、file 或select 的input 的hasLayout 一直为true 。
- 设置
{position:absolute} 的元素的hasLayout 为true
- 设置
{float:left|right} 的元素的hasLayout 为true
- 设置
{display:inline-block} 的元素的hasLayout 为true
- 设置
{height:xx} 或{width:xx} 的元素必须具体以下两个条件之一,其hasLayout 才能为true :
- IE8兼容模式和IE8以前的浏览器中,在标准(strict)模式下其
display 的值是block ,如demo3就不行。
- 元素在怪癖模式(compat mode)下。
- 设置了
{zoom:xx} 的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout 为true ,但在IE8的标准模式下则不会触发hasLayout 。
- 设置了
{writing-mode:tb-rl} 的元素的hasLayout 为true 。
- 元素的
contentEditable 的属性值为true 。
- 在IE8标准模式下设置了
{display:block} 的元素的hasLayout 一直为true ,如demo8。
关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
【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的条件注释。
|
分享到:
相关推荐
有时候,你会发现,在一些JS应用中,涉及到CSS的重新渲染(即页面样式需要更新)的话,IE死活不变。 此时你需要让IE重新渲染一下: function handleIEhasLayout(){ //trigger re-rendering document.body.style....
破解 CSS 不同浏览器中 css hack 的集合。 提供一种简单的方法来进行 css hack。较少的需要更少 v1.7.0 或更高版本 @import " path/to/hack-css.less "// give hack for each selector which you need.class { .only...
本文为大家介绍由hasLayout引发的CSS Bug表,有需要朋友可以参考一下
但是,布局问题是许多IE显示bug的根源,所以理解这个概念以及它如何影响CSS对修复bug是有帮助的。 一、什么是haslayout haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,...
4.4 模块化CSS——在CSS中引入面向对象编程思想 4.4.1 如何划分模块——单一职责 4.4.2 CSS的命名——命名空间的概念 4.4.3 挂多个class还是新建class——多用组合,少用继承 4.4.4 如何处理上下margin 4.5 低...
IE,这个令所有网站设计人员讨厌,但又不得不为它工作的浏览器。不论是6、7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误,就是源于它。 ...
在 Internet Explorer 中,元素使用“布局”概念来控制尺寸和定位,分为拥有布局和没有布局两种情况,拥有布局的元素由它控制本身及其子元素的尺寸和定位,而没有布局的元素则通过父元素(最近的拥有布局的祖先元素...
今天被问起CSS中有个zoom属性是干什么用的,虽然我知道这个属性是用来清除浮动,来触发haslayout的。但具体的定义还不是很了解,就百度了一点关于zoom属性的资料,然后总结了一下。 CSS zoom属性 zoom:设置或检索...
一般很多人遇到的margin失效都是纵向上面的: 一种情况是元素的确不支持margin-top/...假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋,就会了解了:哦,又是haslayout啊。 我们来看看具体的失效代码:
IE6 margin无效的bug, 解决方法有很多。 其中有个解决办法之一。 看代码: 复制代码代码如下: <div xss=removed>some contents</div> 在一些情况下IE6会无效,解决办法是下面的方式。...触发IE浏览器的haslayout
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误,就是源于 haslayout。
什么是Haslayout? 顾名思义,它的意思就是 — has layout,是IE下的特有属性,通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar... IE浏览器下的很多bug都是haslayout =
由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用...
hasLayOut想必大家并不陌生,当设定某一元素的css属性,能够触发该元素的layOut布局,感兴趣的朋友可以了解下
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误,就是源于 haslayout。
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多 IE 下的显示错误,就是源于 haslayout。 什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎...