认识hasLayout——IE6.7浏览器css bug的一大罪恶根源

hasLayout是什么

hasLayout是IE6.7下特有的一个属性(IE8已淘汰)很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

一个元素拥有layout”或“得到layout什么意思?

我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。如果某个HTML元素拥有 haslayout 属性,那么这个元素的 haslayout 的值一定只有 true,haslayout为只读属性 一旦被触发,就不可逆转。

通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。

默认拥有haslayout属性

* body  html

* table, tr, th, td

* img

* hr

* input, button, file, select, textarea, fieldset

* marquee

* frameset, frame, iframe

* objects, applets, embed

触发haslayout属性

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

hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。

display

启动haslayout的值:inline-block

取消hasLayout的值:其他值

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

width/height

启动hasLayout的值:除了auto以外的值

取消hasLayout的值:auto

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

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

position

启动hasLayout的值:absolute

取消hasLayout的值:static

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

float

启动hasLayout的值:left或right

取消hasLayout的值:none

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

zoom

启动hasLayout的值:有值

取消hasLayout的值:narmal或者空值

(又一个ie私有属性,不兼容标准。)

ie7还有一些额外的属性可以触发该属性(不完全列表):

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)

position: fixed

haslayout 问题的调试与解决

因元素hasLayout而导致的问题其实一般都很容易发现:往往是内容出现错位甚至完全不可见,比如含浮动或者绝对定位子元素的容器高度会塌陷。当网页在 IE 中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性,其次再考虑其他属性。

时间: 2024-09-29 16:38:47

认识hasLayout——IE6.7浏览器css bug的一大罪恶根源的相关文章

认识hasLayout——IE浏览器css bug的一大罪恶根源

什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位.虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作. 下列元素默认 hasLayout=true <table> <td> <bod

ie6,ie7,ie8 css bug兼容解决记录

ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

http://www.jb51.net/css/85640.html 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加  任何事情都是有原因的,li边距也不例外.  先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的paddi

【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形

ie6,ie7,ie8 css bug兼容解决方法

IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 普通IE css bug bug名称 影响版本 描述 Image Label Focus Bug IE8,IE7,IE6 <img>元素在<label>元素之内,单击时,焦点不会转移到相应的表单控件 按钮Margin-A

常见ie6的浏览器兼容bug

1.文字本身的大小不兼容 同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的, ie下实际占高16px,下留白3px ff 下实际占高17px,上留白1px,下留白3px opera下就更不一样了 解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值. 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大, 而ie6下是会被内容撑大,高度限定失效,ie7,8,9都不会撑大. 所以不要

浏览器css bug及bug解决方法

Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px;font-size:0;line-height:0;}IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG? 方法: #test{display:inline;}当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设

打败 IE 的葵花宝典:CSS Bug Table

http://blog.alipay.com/2308.html 作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示.当然,还有性能问题.不过,今天要说的是样式的兼容问题.在IE/Mozilla/Webkit/Opera四分天下的今天,IE6-9/Mozilla(Gecko)系列/Chrome/Safari/Opera etc. 这些浏览器的兼容,无不让前端们头痛.而在这之中,最让人头痛的当数IE,特别是IE6.搞定了IE6,基本也