在web前端面试的时候常常会被问及IE的hasLayout问题,有些书籍讲解的不是很清楚(害死人了),在网络上收集一些资料,我认为比较好的有下面两篇。
在初学css的时候,很郁闷的发现同样的代码在IE里和其他的浏览器里表现的判若两人,很是恼火,费解,调整费时费力,后来才知道IE有一个单独的属性:layout,这篇文章仔细的分析一下IE layout,以求能更加深入的了解一下,参考文章:http://www.satzansatz.de/cssd/onhavinglayout.html#toc,同时还借鉴了不一样的蚊子的这篇翻译IE Haslayout详解,其中没有翻译完,我再完整一下: 引言: Internet Explorer 中有很多奇怪的渲染问题可以给他一个”layout”得到解决,John Gallant 和 Holly Bergevin把他归类为“dimensional bugs”(尺寸bug或者尺寸臭虫),意思是可以给对应的元素赋予宽度和高度解决;这给我们带来了一个问题:为什么layout可以改变渲染模式和元素之间的关系? hasLayout定义: layout是IE/WIN里面的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何和其他元素进行相互作用和联系、如何响应和传递应用程序事件、用户事件等; layout的特性可以被某些css样式属性不可扭转的触发,一些html元素本身拥有layout缺省(默认)属性; Microsoft的开发者们决定一些元素应该获得一个“属性”(在面向对象的编程里),他们用了“hasLayout”属性,当渲染特性生效时,他的值被设置成true; 当Microsoft的私有属性hasLayout被设置成true时,我们说这个元素获得了布局(layout)或者说这个元素拥有了布局(layout),布局元素可以是他们中的任何之一,如果那些元素拥有默认的 layout布局或者通过设置合适的css属性使其获得布局(layout); 在非布局元素(non-layout)中,hasLayout不会被触发,比如说一个没有设置宽度和高度(没有尺寸定义)的div,他是所有非布局元素的祖宗; 给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false , 除非把一开始那些触发 hasLayout = true 的 CSS 属性删除或重置。 我们遇到的问题: hasLayout问题,影响那些有经验的设计师和代码人员,layout有许多不同寻常且难以预料的作用在盒子模型的展示,甚至有时会牵连他们的后代元素; 一个元素有或者没有“layout”会引发下列问题: 以上所列只是一个摘要和不完整的; Layout 的由来: 不同于标准属性,也不像某些浏览器的私有 CSS 属性,layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西,元素要么本身自动拥有 layout,要么借助一些 CSS 声明悄悄地获得 layout。 下列元素应该是默认具有 layout 的: 下列 CSS 属性和取值将会让一个元素获得 layout: 有关内联元素: 对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) 具有”layout” 的元素如果同时也 display: inline ,那么它的行为就和标准中所说的 inline-block 很类似了:在段落中和普通文字一样在水平方向和连续排列,受 vertical-align 影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中 display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。 重置HasLayout: 如果没有其他属性再添加 hasLayout 的话,重置下列属性的默认值就会重新设置或破坏Haslayout: 使用者必须小心使用这些重置属性。 display 属性的不同:当用”inline-block”设置了 haslayout = true 时,就算在一条独立的规则中覆盖这个属性为”block”或”inline”,haslayout 这个标志也不会被重置为 false。 把 mid-width, mid-height 设为它们的默认值”0″仍然会赋予 hasLayout,但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout。 hasLayout脚本属性: 我们已经选择参考把“hasLayout”属性作为一个脚本属性,以便把他与我们熟悉的CSS属性区分开来; 并没有方法可以直接设置或者重置hasLayout属性; hasLayout属性可以用来检查该元素是否有layout,例如它有一个ID=“eid”,然后可以直接在IE5.5地址栏里敲: javascript: alert(eid.currentStyle.hasLayout) 这样就可以检测出它的状态; IE的Developer Toolbar允许你动态的检查当前元素的样式,当hasLayout的值为“true”时,它的值被呈现为“-1”,例如,如果你想编辑一个节点的属性的时候,你可以CSS的“zoom”属性为“1”(zoom=1),这样可以触发那个hasLayout属性,以便dubug它; 另一件需要考虑的是:layout怎么作用和影响脚本(script),例如:那些没有layout特性的元素的 clientWidth/clientHeight属性总是返回0,这对于新手来说是难以理解并且是莫名其妙的,并且它和 Mozilla(firefox)浏览器的作用有很大出入,我们能利用这个事实来为IE5.0做决定,就像这样,如果那个clientWidth是0,那么我们说这个元素没有layout; CSS Hacks 在IE7和它以前的版本里,下面的这些hack已经得到了验证: John Gallant 和 Holly Bergevin在2003年发布了这个Holly hack: 给IE6以及它以下的版本layout,也可以用这个underscore hack: .gainlayout { _height: 0; } 并且为了给IE7layout,我们可以用min-hight属性: .gainlayout { min-height: 0; } 二者选一的,这是比较有效的功能,就是conditional comments: <!–[if lte IE 6]> 在外部样式表引入之时,插入一条受限制的注释,是比较简洁和可靠的解决办法: <link rel=”stylesheet” href=”allbrowsers.css” type=”text/css” /> <!–[if lte IE 7]> 给IE6及他以下的版本设定高度总是被用到的,除非他和某些特性冲突(overflow:hidden);那些1%,1px或者0基本上都是相等的,但是那个1%有时候会出现一些问题(即使极少碰到); 在标准模式下给元素设定高度是不可用的,在IE7里应该尽可能避免(或者小心的使用:两个条件:<1>只能是百分值<2>其父元素必须没有确定的高度),鉴于这些原因,我们喜欢用:dispaly:inline-block或者zoom:1; 我们已经对那些浮动(float)元素试验了“holy”hacks,或者那些已经拥有宽度(width)的元素,记住这个目标就是:不能运用这些hacks在拥有height的元素上,因为这样会触发hasLayout=ture; 不要对所有的元素这样: * {_height: 1px;} 这样是不合适的,因为它不仅仅让拥有layout的没有变好,反而改变了那些基本元素的渲染和展示; hack管理(management): 尽管IE7已经发布了,但是我们仍然不能预见将来的IE版本是否继续需要hasLayout来修复bug和他们是怎么相互作用的,所以用MS的私有属性zoom或者有田间的条件注释是明智的: <!–[if lt IE 7]><style> <!–[if IE 7]><style> 如果想得到一个更详尽的hasLayout触发和hasLayout在不同的IE版本里的比较的话,请参考这里:Thoughts on IE hack management. IE Mac简短介绍: IE Mac和IE for Windows是十分不同的,每一种都有自己的渲染引擎,IE Mac用任何方式都不知道hasLayout的行为,IE Mac渲染引擎是在向标准遵循模式靠近; 吾IE layout详解
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
由于 layout 元素的特性,浮动模型会有很多怪异的表现。
当一个内联级别的元素需要 layout 的时候往往就要用到它,这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。”inline-block行为”在IE中是可以实现的,但是非常与众不同: IE/Win: inline-block and hasLayout 。
当遇到layout错误的展现效果是,一般都会尝试设定高度来修复
height: 1% 就在 Holly Hack 中用到。
IE专有属性。不过 zoom: 1 可以临时用做调试。
MS专有属性。
在 IE7 中,overflow 也变成了一个 layout 触发器,这个属性在之前版本 IE 中没有触发 layout 的功能,除非这个元素被其他情况触发添加到了一个盒子中;
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性,尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
就算设为0也可以让该元素获得 layout。
即使设为0也可以让该元素的 haslayout=true
* html .gainlayout { height: 1%; }
<style>
.gainlayout { height: 1px; }
</style>
<![endif]–>
<link rel=”stylesheet” href=”iefix.css” type=”text/css” />
<![endif]–>
.gainlayout { height: 0; }
</style><![endif]–>
.gainlayout { zoom: 1; }
</style><![endif]–>
IE Layout详解
精选 转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
关于ie的layout深层剖析
l最近也开始关注hasLayout的东西. 先放在这里, 有空再整理研究 英文在此。
css html microsoft 绝对定位 边距 -
Layout_marginTop与Layout_marginBottom详解
和是Android布局中常用的两个属性,用于设置View与其父容器或其他View之间的上边距和下边距。通过本文的详
marginTop android 边距 Android -
Android中的Layout_weight详解android 控件 xml 优先级 布局文件
-
Magento布局layout.xml文件详解
解析顺序布局xml文件一般位于app/design/{area}/{package}/{theme}/layout以...
php javascript 人工智能 ViewUI html -
openGL之API学习layout作用详解
GLSL语言规范中也有对此的详细说明https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.4.60.pdf这里大致翻译如下:
glsl4.6 openGL shader4.6 着色器 限定符