文档章节

IE的hasLayout详解

sunshinewyf
 sunshinewyf
发布于 2015/10/06 19:00
字数 2734
阅读 63
收藏 0

什么是 haslayout ?  

  “Layout”是一个 IE/Win 的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等,这有点类似于一个 窗体的概念。微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 layout , 也就是 hasLayout。hasLayout 其实既不是一个属性更不是一个行为,而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念,在这个概念下渲染的元素将具有一种特性。实际上这种渲染特性在有些 HTML 元素中与身俱来,而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ,且一旦触发将不可逆转。

  当我们说一个元素“拥有layout”或“得到layout”,或者说一个元素“has layout” 的时候,我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。而“无layout元素”,是指 hasLayout 未被触发的元素,比如一个未设定宽高尺寸的干净 div 元素就可以做为一个 “无layout祖先”。给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false , 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除。IE Developer Toobar 可以实时检查一个元素的当前样式;如果 hasLayout 是 true ,那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 hasLayout 以便调试。另外可以用javascript获取hasLayout的状 态,<script>alert(my.currentStyle.hasLayout);</script>,但是不可以设 置。

  另外一个需要注意的是“layout”会影响javascript编程。如果一个元素没有“layout”,那么 clientWidth/clientHeight 总是返回0。这会让一些脚本新手感到困惑,而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”:如果 clientWidth 是零那么这个元素就没有 layout。

  

 什么情况下hasLayout会出现?

  实际上一般情况都不会出现的,当然除了使用下面默认具有hasLayout的元素或使用特定样式触发hasLayout以外;它会带来各种诡异 表现,当你发现IE6 IE7出现了一些不可思议的问题,首先要检查的就是是否是hasLayout在捣鬼;hasLayout只出现在IE7及更早版本中,IE8之后不存在 hasLayout解析模式。

 默认具有 haslayout 的元素(不完全列表)
  * html, body
  * table, tr, th, td
  * img
  * hr
  * input, button, file, select, textarea, fieldset
        * legend
  * marquee
  * frameset, frame, iframe
  * objects, applets, embed
  对于并非所有的元素都默认有布局,微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局,会对性能和内存使用上产生有害的影响。

如何激发 haslayout?

  大部分的 IE 显示错误,都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout,使其“拥有布局”。如下所示,通过设置以下 css 属性即可。
  * display: inline-block
  * height: (任何值除了auto) 通常用 _height:1%;解决IE6的问题,height:1%不会改变实际高度
  * float: (left 或 right)
  * position: absolute
  * width: (任何值除了auto)
  * writing-mode: tb-rl
  * zoom: (除 normal 外任意值)
  IE7 还有一些额外的属性(不完全列表):
  * 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 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中display: inline 就是内联,不像 IE 一旦内联元素拥有 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
  E6 的躲躲猫(peek-a-boo) bug
  bug 修复: _height:1%;

 

补充资料:

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中才获支持)

  • position: fixed(IE7)

  • 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)

 

 

实际操作中

zoom:1; 是很不错的触发方法,不会改变原来的任何式样,而且仅仅是IE可以识别,但是唯一的坏处就是他不能通过W3C。

设置 display:inline-block 然后再设置回原始的 display 属性,这样不会移除 layout,我们就可以达到设置 layout 而不使用IE的条件注释的目的。下面是例子:

 

[css] view plaincopyprint?

  1. div { display: inline-block; }   

  2. div { display: block; } /* 分别在两段 css 块中设置 */   


 

hasLayout都会引发什么问题? 

1. 浮动元素会被layout元素自动包含。正常情况下,浮动元素会按照left和top的设置偏离原来文档流中的位置,父元素是不会调整高宽去包含该浮动元 素的(也就解释了为什么浮动元素不能撑开父容器),但在IE中,layout元素会自动调整高和宽以包含浮动元素(给父容器_height:1%;即可解 决)http://blog.csdn.net/hedong37518585/article/details/6639731

 

2.浮动元素旁边的元素。当一个块级元素紧跟在一个左浮动元素之后时,其中的文字内容应该沿着浮动元素的右边顺序排列并会滑到浮动元素下方。但是如果这个块级元素有 layout,那么这个元素就会表现为一个矩形,其中文字不会滑向浮动元素下方。

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 hasLayout 会影响非浮动元素中的文字是否围绕浮动元素</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. .box{  

  12.     width:220px;  

  13.     overflow:auto;  

  14.     font-size:12px;  

  15. }  

  16. .leftbox{  

  17.     background:#CCC;  

  18.     width:100px;  

  19.     height:100px;  

  20.     float:left;  

  21.     *margin-right:-3px; /*针对IE6 浮动元素水平右外边距移动-3px 即可解决*/  

  22. }  

  23. .textbox{  

  24.     background:#FFCCCC;  

  25.     height:1%;/*去掉后 IE6下 文字不会再围绕浮动*/  

  26. }  

  27. </style>  

  28. </head>  

  29.   

  30. <body>  

  31. <div class="box">  

  32.     <div class="leftbox">浮动元素</div><p class="textbox">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>  

  33. </div>  

  34. </body>  

  35. </html>  

 

3. IE专有的滤镜属性filter是只适用于 layout 元素的,也就是说如果你给一个DIV设置透明用的是filter:alpha(opacity=80);如果你没有让DIV触发hasLayout,那么这个透明将无效

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 filter透明滤镜 需要触发该元素的hasLayout</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. body{  

  12.     background:#000;  

  13.     font-size:12px;  

  14. }  

  15. .textbox{  

  16.     background:#FFCCCC;  

  17.     opacity:0.8;  

  18.     filter:alpha(opacity=80);  

  19.     zoom:1;  

  20. }  

  21. </style>  

  22. </head>  

  23.   

  24. <body>  

  25. <div class="textbox">文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>  

  26. </body>  

  27. </html>  

 

4. hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout=false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。

[html] view plaincopyprint?

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8" />  

  5. <title>IE6 hasLayout影响块元素鼠标响应区域</title>  

  6. <style>  

  7. *{  

  8.     margin:0;  

  9.     padding:0;    

  10. }  

  11. div{  

  12.     width:100px;  

  13.     height:50px;  

  14.     background:#FF0000;  

  15. }  

  16. a{    

  17.     display:block;  

  18.     height:1%;/*去掉后就不具有Layout布局 则只有文字覆盖区域以响应*/  

  19. }  

  20. </style>  

  21. </head>  

  22.   

  23. <body>  

  24. <div>  

  25. <a id="my" href="javascript:;">click me</a>  

  26. </div>  

  27. </body>  

  28. </html> 

这里有一篇hasLayout的英文介绍,贴上:http://www.satzansatz.de/cssd/onhavinglayout.html

本文转载自:http://blog.csdn.net/hedong37518585/article/details/6639263

上一篇: 减少页面重绘
下一篇: css 实现小三角
sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
定义了浮动元素后margin-bottom失效的解决办法

虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高...

罗马教堂的钟声
2015/12/21
1K
0
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx
2017/11/29
0
0
认识hasLayout——IE浏览器css bug的一大罪恶根源

什么是hasLayout?hasLayout 是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当...

lixiaokai2008
2013/09/06
296
0
低版本IE中CSS的bug之源“haslayout”

haslayout 是Windows InternetExplorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调...

hyz000
2016/04/24
19
0
【CSS】 IE6 ,7下a链接失效的问题及解决方案

问题描述: web应用中,经常需要在图片上添加相应的链接,而且相对于传统的文字链接的方式,不仅美观,而且有更大的可点击区域。例如,京东网图书页面的一个简单布局: 这种情况是几乎没有任...

编译中ing
2018/09/14
18
0

没有更多内容

加载失败,请刷新页面

加载更多

谁说多功能和低价格不能兼得?Aspose系列产品1024购买指南请查收!

你还在为了Word、Excel、PDF、CAD等文档格式转换而发愁吗? 你是否在寻找一款能够在应用程序中文档管理的工具呢? Aspose——支持100多种文件格式创建、编辑、转换和打印! 往下看,找一找哪...

mnrssj
26分钟前
3
0
hbase客户端API

本章介绍用于对HBase表上执行CRUD操作的HBase Java客户端API。 HBase是用Java编写的,并具有Java原生API。因此,它提供了编程访问数据操纵语言(DML)。 HBaseConfiguration类 添加 HBase 的配...

水木星辰
26分钟前
3
0
[插件化开发] 1. 初识OSGI

初识 OSGI 背景 当前product是以solution的方式进行售卖,但是随着公司业务规模的快速夸张,随之而来的是新客户的产品开发,老客户的产品维护,升级以及修改bug,团队的效能明显下降,为了解...

IsaacZhang
27分钟前
4
0
Webstorm 环境使用 nuxt.js 做开发,@ 和 ~ 别名配置

好的IDE + 好的代码提示 = 高效率的开发 webstorm 设置@和~别名,有助于代码查看和跳转. step 0 在项目下创建一个webpack.config.js,内容如下: const path = require('path')module.exp...

皇虫
31分钟前
3
0
Knative 实战:基于 Knative Serverless 技术实现天气服务-下篇

上一期我们介绍了如何基于 Knative Serverless 技术实现天气服务-上篇,首先我们先来回顾一下上篇介绍的内容: 通过高德天气 API 接口,每隔 3 个小时定时发送定时事件,将国内城市未来 3 天...

Mr_zebra
48分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部