今天在做东西的过程中、、、出现以下的一个问题:
功能是点击【Test Run】,下面的【live】和【SandBox】出现,当鼠标移开时,消失,就是类似于一个导航菜单的功能、、、
这一切在FireFox下运行正常,代码如下:
CSS代码
html
js:
就是中间的那段html片段,在firefox下运行正常,但是在IE7下面,却运行不正常
具体症状就是点击【Test Run】后,鼠标只要一移动,那个下面的就消失了,从而导致了下面的两个item无法点击、、、
通过IE WebDeveloper仔细分析之后,发现在style中有个hasLayout=true的属性,
后来在网上google了一下,发觉是因为IE中的一个特有属性hasLayout捣的鬼、、、
hasLayout
是IE特有的一个属性。很多的ie下的css
bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和
组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这
意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。
原来在父div中,设置div的width/height都会触发IE中的hasLayout属性(hasLayout=true),导致div中的子元素并不能根据父div来对自身进行定位和设置属性、、、
看到这儿,基本上就有了解决办法了:
触发父div中子元素的hasLayout属性即可,在此例中我设置了子div的width属性、、、如下:
完了之后,在IE7中测试,通过、、、O(∩_∩)O~
下面附下一段关于hasLayout的介绍:
什么是hasLayout?
hasLayout 是IE特有的一个属性。很多的ie下的css
bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的
hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。
下列元素默认 hasLayout=true :
<table> <td> <body> <img> <hr> <input>
<select> <textarea> <button> <iframe> <embed>
<object> <applet> <marquee>
很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout
状态。下面列出可以触发hasLayout的一些CSS属性值。
-------------------------------------
display
启动haslayout的值:inline-block
取消hasLayout的值:其他值
--------------------------------------
width/height
启动hasLayout的值:除了auto以外的值
取消hasLayout的值:auto
---------------------------------------
position
启动hasLayout的值:absolute
取消hasLayout的值:static
----------------------------------------
float
启动hasLayout的值:left或right
取消hasLayout的值:none
---------------------------------------
zoom
启动hasLayout的值:有值
取消hasLayout的值:narmal或者空值
(zoom是微软IE专有属性,可以触发hasLayout但不会影响页面的显示效果。zoom:
1常用来除错,不过 ie 5 对这个属性不支持。)
----------------------------------------
writing-mode: tb-rl
这也是微软专有的属性。
ie7还有一些额外的属性可以触发该属性(不完全列表):
min-height: (任何值)max-height: (任何值除了none)min-width: (任何值)max-width:
(任何值除了none)overflow: (任何值除了visible)overflow-x: (任何值除了visible)overflow-y:
(任何值除了visible)5position: fixed
因元素hasLayout而导致的问题其实一般都很容易发现:往往是内容出现错位甚至完全不可见。举一个典型例子,当一个元素内含浮动或绝对定位的内容时,它通常会表现出奇怪和错误的行为,看下面的代码:
<div id="nofloatbox">
<div
id="floatbox"></div>
</div>
CSS代码如下:
#nofloatbox {border: 1px solid #FF0000;background: #CCC;} #floatbox {float:
left;width: 100px;height: 100px;border: 1px solid #0000FF; background: #00FF00;}
ie显示结果如下图:
可见无浮动的div并没有被里面的浮动元素的高度撑开,其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试,css代码如下:
#nofloatbox { border: 1px solid #FF0000;background: #CCC;zoom:1;} #floatbox
{float: left; width: 100px;height: 100px;border: 1px solid #0000FF;background:
#00FF00;}
保存刷新ie浏览器窗口,如下图:
可见这次外围容器的高度被撑起来了。
同样,设定上文所述的其他会触发hasLayout的css属性都会得到这个结果。通常firefox等标准的遵守浏览器可以加上overflow:
hidden;来解决,而IE则不行,需要触发其hasLayout属性才可以。
hasLayout对于内联元素也可以有效果,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果。如下例:
代码:
<p>今天的<span style="width: 100px; height: 50px; background:
#DDD;">天气</span>真好</p>
效果如下图所示:
下面给span加上zoom: 1;来触发hasLayout:
<p>今天的<span style="width: 100px; height: 50px; background: #DDD;
zoom: 1;">天气</span>真好</p>
这回的效果如下图所示:
要注意的是,hasLayout是微软专有的东西,对firefox等比较遵守标准的浏览器就无效了,因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果,不知ie8是否已经弃用这个属性了?
其实依据合理的语义化,恰当的文档流,正确的标准化所生产出来的页面,在各个公司出品的标准渲染的浏览器下,一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话,在ff下会表现正常,而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的
haslayout属性,通常可以通过加上zoom:
1;来调试。直到找到了产生问题的元素,再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是,有时不便指定尺寸属性的情况下,就只能寻找替代方案了。对于ie7
,最好的办法是设置最小高度属性为0;这个技术是无害的,因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%,然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly
hack。
- 大小: 3.3 KB
- 大小: 78.7 KB
- 大小: 87.4 KB
- 大小: 46.6 KB
- 大小: 32.6 KB
分享到:
相关推荐
当Haslayout为false时,一些常见的问题可能就会出现,这些问题是由于元素没有控制自身布局的能力而导致的。例如: 1. **文字消失或截断**:某些情况下,元素的内容可能无法正常显示,文字可能会消失或者被截断。 2....
比如,一个常见的问题是双倍边距BUG(即在IE中使用margin时出现比预期效果加倍的边距),这类问题通常可以通过设置display:inline-block或触发hasLayout属性来解决。 在IE中,调试时可利用开发者工具栏的...
不论是6、7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非常有必要彻底弄清除的概念。大多 数IE下的显示错误,就是源于它。 什么是Layout呢?"Layout" 是 IE 的一个私有属性,并不是W3C标准。...
- 解决hasLayout元素子元素出现加倍margin-left的问题,可以通过调整margin-left的值或使用*margin-left。 - 为th元素添加text-align: inherit属性,使其继承上级元素的text-align。 - 针对PNG图片中的颜色显示问题...
开发者应该理解这些概念,以便更好地控制元素的布局行为,优化性能,并避免潜在的布局抖动问题。 总的来说,理解和控制`hasLayOut`与CSS属性的关系是前端开发中提升性能的关键一环。通过谨慎地设置那些能够触发布局...
由于IE浏览器在处理页面布局时存在一些与众不同的行为,`haslayout`成为了理解和解决IE显示问题的关键。 `haslayout`是IE中的一个布尔属性,当它为`true`时,表示元素负责自己的尺寸和定位,包括其子元素。相反,...
一.hasLayout 是什么?hasLayout 与 BFC 有很多相似之处,但 hasLayout 的概念会更容易理解。在 Internet Explorer 中,元素使用“布局”概念来控制尺寸和定位,分为拥有布局和没有布局两种情况,拥有布局的元素由它...
在学习CSS的过程中,尤其是涉及到IE浏览器的兼容性问题时,haslayout是一个不容忽视的概念。它是IE浏览器渲染引擎中一个重要的内部属性,这一概念主要存在于IE6及IE7版本中,并且对其他浏览器渲染方式几乎没有影响。...
当遇到与hasLayout相关的问题时,可以通过调整元素的CSS属性或使用条件注释(针对IE的特定CSS)来解决。 理解并解决这些CSS浏览器兼容性和解析问题对于构建跨浏览器兼容的网站至关重要。开发者需要时刻关注浏览器...
通过阅读更多关于`hasLayout`的文章,如"On having layout"等,可以帮助更全面地理解其背后的原理和触发条件。 #### 五、总结 对于`margin-left`和`margin-right`失效的问题,主要原因是由于IE浏览器中的`...
#### 四、解决“hasLayout”带来的问题 由于“hasLayout”的存在,有时候会出现一些难以预料的布局问题。下面列举了一些常见的解决方案: - **明确设置尺寸**:为元素显式设置宽度和高度。 - **使用display属性**...
IE6特有的hasLayout机制,当元素满足某些条件时,会自动计算其尺寸,可能导致布局问题。可以通过设置`width`、`height`、`zoom`等属性触发或避免hasLayout。 6. **CSS选择器限制** IE6对CSS高级选择器(如`:hover...
- 或者通过 `zoom` 属性触发“hasLayout”机制,从而解决该问题。例如: ```css .element { zoom: 1; *zoom: 1; /* 对于 IE7 及以上版本 */ } ``` #### 3. 高度计算问题 - **问题描述**:在IE6/7中,当一个...
- Firefox的`hasLayout`概念:不同于IE,Firefox没有这个概念,处理布局时需要注意。 3. CSS Hack技术: - 特性前缀:如`-moz-`用于Firefox,`-webkit-`用于Safari和Chrome,`-ms-`用于IE。 - 选择器Hack:如`_...