CSS教程:认真学习haslayout

2009-09-07 08:11 作者：佚名 来源：网页教学网

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

要想更好的理解 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”。 负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）： * body and html * table, tr, th, td * img * hr * input, button, file, select, pre , fieldset * marquee * frameset, frame, iframe * objects, apple ts, 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 还有一些额外的属性(不完全列表): * 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%;

上一篇：JS常用代码片段截取（三）

下一篇：Learn CSS Positioning in Ten Steps

查看评论

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

个人资料

Vanessa219
• 访问：801817次
• 积分：10029分
• 排名：第165名
• 原创：462篇
• 转载：166篇
• 译文：14篇
• 评论：2126条

文章搜索

文章分类

• b3log(14)
• Beauty(11)
• Browser(9)
• Code(1)
• Communist Party(1)
• Consciousness(3)
• CSS(32)
• Database(7)
• Eclipse(2)
• English(18)
• Film(4)
• Flash(1)
• Flex(8)
• GAE(4)
• Hibernata(3)
• HTML(17)
• Information(67)
• Japanese(8)
• Java(65)
• Java EE(7)
• JavaScript(57)
• jBPM(3)
• jQuery(32)
• JSF(25)
• Knowledge(64)
• Maven(3)
• Music(3)
• NetBeans(38)
• QQZone(9)
• Seam(2)
• Software(6)
• Software Engineering(1)
• Technology(4)
• Tencent(1)
• Trivialism (26)
• Ununtu(22)
• User Experience(13)
• Web(97)
• Web Toolkit(13)
• Work(13)

文章存档

2012年02月(1)
2011年07月(1)
2011年06月(5)
2011年05月(3)
2011年04月(3)
2011年03月(7)
2011年02月(7)
2011年01月(5)
2010年12月(10)
2010年11月(7)
2010年10月(6)
2010年09月(7)
2010年08月(8)
2010年07月(9)
2010年06月(8)
2010年05月(6)
2010年04月(3)
2010年03月(4)
2010年02月(7)
2010年01月(8)
2009年12月(9)
2009年11月(10)
2009年10月(20)
2009年09月(18)
2009年08月(29)
2009年07月(18)
2009年06月(28)
2009年05月(38)
2009年04月(43)
2009年03月(35)
2009年02月(35)
2009年01月(18)
2008年12月(24)
2008年11月(32)
2008年10月(18)
2008年09月(25)
2008年08月(6)
2008年07月(9)
2008年06月(19)
2008年05月(15)
2008年04月(19)
2008年03月(56)
2008年02月(2)
2008年01月(1)

阅读排行

• Gartner:2009年IT行业十大战... (455741)
• 数学建模_人口预测 (6318)
• QQ空间花匠免费代码 (5725)
• 小技巧给网页减肥 让网站访问提速 (5663)
• 美国主流网站所使用的JavaScript... (5410)
• 前端优化方案-JavaScript 优... (5318)
• Jquery Tabs 插件简介-更友好... (4875)
• QQ空间最新开场免费代码 (4868)
• 最新QQ空间免费导航代码 (4842)
• 背下这148句话，你可以提高一个档次了，... (4771)

评论排行

• 数学建模_人口预测 (199)
• 小技巧给网页减肥 让网站访问提速 (199)
• 背下这148句话，你可以提高一个档次了，... (139)
• 悲哀莫过于心死 (82)
• 好听的歌曲~~~推荐 (58)
• 前端优化方案-JavaScript 优... (47)
• 杂谈——web的日积月累 (47)
• CSS模板是怎么炼成的 (40)
• new work (39)
• 实现圆角的几种方式 (35)

推荐文章

最新评论

• 原来荣誉专家没有专家好。

  ysl_228: 你的个性我喜欢！

• 面向对象的基本概念（二）－－UML.类之间的关系

  guanzhongdaoke54007: 呵呵，路过，看到了，谢谢~~与4年前的楼主对话，颇有穿越之感~呵呵

• 背下这148句话，你可以提高一个档次了，不止在文学方面

  guanzhongdaoke54007: 都是小时候背的诗句。。

• 忽然之间

  aa4790139: 这个歌不错，简单的旋律....

• 好听的歌曲~~~推荐

  aa4790139: 若是没有找到一首我中意的 额···

• 数学建模_人口预测

  gc88010124: 你好，毕业论文是关于人口问题的。发现阁下论文有独到之处。求发邮箱，不胜感激。414437343@qq...

• JavaScript 事件

  witlym311: 大神，我是小菜鸟，请教个问题： 用户列表 ...

• 背下这148句话，你可以提高一个档次了，不止在文学方面

  nttecyimao: 恩 读完后想起中学时代，一些往事历历在目，感触颇深，细细体味间，获益匪浅！

• 数学建模_人口预测

  Vanessa219: @landerli:ok

• 背下这148句话，你可以提高一个档次了，不止在文学方面

  Vanessa219: @chjttony:中国历史博大精深~~~

常用链接

• Linux桌面中文网
• Java开源大全
• UML官方
• NetBeans中文社区
• HTML代码示例
• Java Code examples
• JavaFX Home
• Jboss中文社区
• Jesse James Garrett
• 刘未鹏

我的好友

• DL88250
• 光光
• zyofprogrammer
• mmchsusan
• meteorlWJ
• 88250@B3log (RSS)
• dorainm
• herian
• 我的另一个小窝 (RSS)
• 苍穹
• Eleven-china
• 啊骚
• 向洁

pre
原文链接： http://blog.csdn.net/vanessa219/article/details/4533435