haslayout是什么意思

2016-02-19 23:49 9 1 收藏

下面图老师小编要向大家介绍下haslayout是什么意思,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误,就是源于 haslayout。

什么是 haslayout ?
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout 属性值为true时,我们说这个元素有一个布局(layout)

当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说,这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。因此,一些元素默认会有一个布局。当我们说一个元素拥有layout或得到layout,或者说一个元素has layout 的时候,我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个layout元素可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性,那么这个元素的 haslayout 的值一定只有 true,haslayout 为只读属性 一旦被触发,就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout 的元素,通常显示为haslayout = -1。

负责组织自身内容的元素将默认有一个布局,主要包括以下元素(不完全列表):

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

* body and html
* table, tr, th, td
* img
* hr
* input, button, file, select, textarea, fieldset
* marquee
* frameset, frame, iframe
* objects, applets, embed

对于并非所有的元素都默认有布局,微软给出的主要原因是性能和简洁。如果所有的元素都默认有布局,会对性能和内存使用上产生有害的影响。

如何激发 haslayout?
大部分的 IE 显示错误,都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout,使其拥有布局。如下所示,通过设置以下 css 属性即可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性,目前还未被浏览器广泛支持。

对于内联元素(默认即为内联的元素,如 span,或 display:inline; 的元素),

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
zoom 总是可以触发 hasLayout,但是在 IE5.0 中不支持。
具有layout 的元素如果同时 display: inline ,那么它的行为就和标准中所说的 inline-block 很类似了:在段落中和普通文字一样在水平方向和连续排列,受 vertical-align 影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中 display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

haslayout 问题的调试与解决
当网页在 IE 中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1 。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是 haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的 width/height 属性,其次再考虑其他属性。

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

对 IE7 来说,最好的方法时设置元素的最小高度为 0 (min-height:0;)。

haslayout 问题引起的常见 bug
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;

E6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;

糖伴西红柿说,这篇文章不是原创,是网上资源的汇总,加上自己理解的综合。可能还不是很全面,还需要再进一步细化。

来源:http://www.tulaoshi.com/n/20160219/1630700.html

延伸阅读
标签: 生活常识
血崩是什么意思 血崩是什么意思 第一:血崩就是大量出血——女性小产或月事大量出血的状况通俗来说叫作-血崩,血崩是一个俗称,所叙述的状况通常指:血流出来的速度像自来水一样,止血的方法如止血钳,压迫法。 第二:血崩的时候很多药物都是没有效的,帮助血液凝固的药物,都用下去了,仍没有改善,有时医师可能知道出血的地方,但是...
标签: 结扎
结扎是什么意思  在外科手术中用特制的线把断裂的血管扎住,制止出血或把输精管、输卵管等扎住,使管腔不畅通,从而达到避孕节育的效果。具体结扎是指使用一定的手段(如使用羊肠线)将人体或生物体的某些管道(如血管、输精管、输卵管等)扎住或起到同样的效果,“结扎术”通常被认为是一种小手术。有时候,“结扎”被用于特指输精管...
标签: 生活常识
CP的英文缩写 首先我们要知道的是CP是英语中couple的缩写,也就是夫妻的意思,同时也是配对的意思,就是一对一对的配偶的关系,常常表示一男一女。 CP是什么意思 现在CP这个词语在网络上比较盛行,上面也说到了是夫妻的意思,而在网络观众把自己所喜欢的明星搭配情侣的陈浩,通常就是想象的情侣或许配偶。除此之外,喜欢游戏...
抬杠是什么意思?   抬杠是什么意思: 抬杠是一款集合大众观点的社会娱乐应用,用户可以选择某一观点和好友或者别人一起争论,最后都会以娱乐的方式给出争论的结果。抬杠一词本义由东北的抬杠会而来。 基本解释 1.通过拎环悬挂容器于其上,并由两人抬着的棒 2.无谓地争辩;顶牛。也称钻牛角尖,专门找人 抬杠 ...
标签: 生活常识
活检是什么意思 活检是什么意思 活检就是从病变部位,或病灶处,取出的用于诊断的样本组织,前提条件是生物体有生命的时候做的检测。活检是需要一定时间的,而且准确率是非常高的。 活检是从病变区域中取出的用于诊断的小样本组织,分两种活检的方法。检测的准确率是非常高,但是活检后也是要注意一定的休息。 活检主要是看局部的...

经验教程

371

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部