IE浏览器中hasLayout的介绍
haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了haslayout的属性,属性值可以为true或false。
当一个元素的haslayout属性值为true时,我们说这个元素有一个布局(layout)。要想更好的理解CSS,尤其是IE下对CSS的渲染,haslayout是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于haslayout。当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。
简单来说,这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素完成这些工作。因此一些元素默认会有一个布局。属性haslayout被设为了true。拥有布局的元素可以是默认就有layout的元素也可以是通过设置某些CSS属性得到layout的元素。如果某个html元素拥有haslayout属性,那么这个元素的haslayout值一定为true,haslayout为只读属性一旦被触发,就不可逆转。
通过IE Developer Tollbar 可以查看IE下html元素是否拥有haslayout,在IE Developer Toolbar下,拥有haslayout的元素,通常显示为‘haslayout=-1’。
负责组织自身内容的元素将默认有一个布局,主要包括以下元素(不完全列表):
*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 Explorer7还有一些额外的属性(不完全列表):*min-height:(任意值) *max-height:(除none外任意值) *min-width:(任意值) *max-width:(除none外任意值) *overflow:(除visible外任意值) *overflow-x:(除visible外任意值) *overflow-y:(除visible外任意值) *position:fixed。
对于内联元素(默认即为内联的元素或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%;
IE6 的躲躲猫(peek-a-boo) bug bug 修复: _height:1%;
IE浏览器中hasLayout的介绍的更多相关文章
- 【js】IE、FF、Chrome浏览器中的JS差异介绍
如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject ff ...
- 浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- [转]chrome浏览器中 F12 功能的简单介绍
本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...
- 【F12】chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- chrome浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- IE、FF、Chrome浏览器中的JS差异介绍
FF.Chrome:没有window.event对象 FF.Chrome:没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以 ...
- edge 浏览器中数字显示为链接
在win10 中的Edge浏览器中部分格式的数字显示链接.经过各种搜索找到一篇文章 How to remove phone number link on Iphone? ,通过这篇文章了解 edge ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- 在浏览器中输入Google.com并且按下回车之后发生了什么(转载)
原文地址:https://github.com/skyline75489/what-happens-when-zh_CN#id9 本文试图回答一个古老的面试问题:当你在浏览器中输入google.com ...
随机推荐
- JavaScript 函数方法 - bind()
Function.prototype.bind() ECMAScript5中新增的方法,但是在ECMAScript3可以通过模仿实现其方法作用 作用: bind() 方法会创建一个新函数,当这个新函数 ...
- asp.net的3个经典范例(ASP.NET Starter Kit ,Duwamish,NET Pet Shop)学习资料
asp.net的3个经典范例(ASP.NET Starter Kit ,Duwamish,NET Pet Shop)学习资料 NET Pet Shop .NET Pet Shop是一个电子商务的实例, ...
- Visual Studio/vs2013 正忙
打开VS解决方案时一直显示Visual Studio正忙,项目卡在初始化,此后试了很多方法,将项目拷贝到领一个磁盘当中再打开就可以直接打开了
- 正则表达式,Regex类
C#regex是正则表达式类用于string的处理,查找匹配的字符串.1,先看一个例子Regex regex=new Regex(@”OK“)://我们要在目标字符串中找到"OK" ...
- ZJOI 最小割 CQOI 不同的最小割 (最小割分治)
题目1 ZJOI 最小割 题目大意: 求一个无向带权图两点间的最小割,询问小于等于c的点对有多少. 算法讨论: 最小割 分治 代码: #include <cstdlib> #include ...
- C/C++中define的使用
代码: #include <iostream> using namespace std; #define a 10 void foo(); void bar(); void foo(){ ...
- C#随机生成连续多少个十六进制数字
1.调用系统函数生成全球唯一标识 Guid.NewGuid().ToString(); 2.生成16组十六进制数 ,)+Guid.NewGuid().ToString().Substring(,)+G ...
- 关于 addEventListener 和 handleEvent 方法
使用 addEventListener 可以绑定事件,并传入回调函数. Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用,也都允许直接把拥有 handleEve ...
- [POJ] 3368 / [UVA] 11235 - Frequent values [ST算法]
2007/2008 ACM International Collegiate Programming Contest University of Ulm Local Contest Problem F ...
- Android setTextColor无效_安卓setTextColor()的参数设置方式
通过代码setTextColor时.如果color是一个资源文件 会set失败 没有效果 遇到这样的情况有两种解决办法.亲测过.两种都是有效的 一.注解方式 通过在方法上面添加注解解决问题 代码如下 ...