IE layout详解
引言:
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”会引发下列问题：
- 许多平常的IE浮动（float）bug；
- 元素本身对一些基本属性的异常处理问题；
- 容器和他的后代之间的外边距重叠（被随坏）问题；
- 各种各样的列表问题；
- 背景图像的定位偏差问题。
- 使用脚本时遇到的浏览器之间处理不一致的问题。
以上所列只是一个摘要和不完整的;
Layout 的由来：
不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。
下列元素应该是默认具有 layout 的：
- <html>, <body>
- <table>, <tr>, <th>, <td>
- <img>
- <hr>
- <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
- <iframe>, <embed>, <object>, <applet>
- <marquee>
下列 CSS 属性和取值将会让一个元素获得 layout：
- position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。 - float: left|right
由于 layout 元素的特性，浮动模型会有很多怪异的表现。 - display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有
layout。”inline-block行为”在IE中是可以实现的，但是非常与众不同： IE/Win: inline-block and
hasLayout 。 - width: 除 “auto” 外的任意值
当遇到layout错误的展现效果是，一般都会尝试设定高度来修复 - height: 除 “auto” 外的任意值
height: 1% 就在 Holly Hack 中用到。 - zoom: 除 “normal” 外的任意值
IE专有属性。不过 zoom: 1 可以临时用做调试。 - writing-mode: tb-rl
MS专有属性。 - overflow: hidden|scroll|auto
在 IE7 中，overflow 也变成了一个 layout 触发器，这个属性在之前版本 IE 中没有触发 layout 的功能，除非这个元素被其他情况触发添加到了一个盒子中； - overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。 - 另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。
- position: fixed
- min-width: 任意值
就算设为0也可以让该元素获得 layout。 - max-width: 除 “none” 之外的任意值
- min-height: 任意值
即使设为0也可以让该元素的 haslayout=true - max-height: 除 “none” 之外的任意值
有关内联元素：
对于内联元素(可以是默认即为内联的比如 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:
如果没有其他属性再添加 hasLayout 的话,重置下列属性的默认值就会重新设置或破坏Haslayout:
- width, height (设为 “auto”)
- max-width, max-height (设为 “none”)(在 IE 7 中)
- position (设为 “static”)
- float (设为 “none”)
- overflow (设为 “visible”) (在 IE 7 中)
- zoom (设为 “normal”)
- writing-mode (从 “tb-rl” 设为 “lr-t)
使用者必须小心使用这些重置属性。
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：
/* \*/
* html .gainlayout { height: 1%; }
/* */
- 除了IE6下的标准模式里的行内元素，在IE5-6的所有版本里，这个hack都会触发所有元素的layout;
- 除了某些极稀少的height:0或者1px，它通常工作的很好；
- 除了在IE6的标准模式下（height:1%转化为height:auto,除非它的父元素有一个明确的高度），其他都与overflow:hidden是不相容的；
- 在IE7的标准模式下*html不会选择任何一个元素，它是没有任何效果的；
给IE6以及它以下的版本layout,也可以用这个underscore hack:
.gainlayout { _height: 0; }
并且为了给IE7layout,我们可以用min-hight属性：
.gainlayout { min-height: 0; }
二者选一的，这是比较有效的功能，就是conditional comments:
<!–[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]–>
在外部样式表引入之时，插入一条受限制的注释，是比较简洁和可靠的解决办法：
<link rel=”stylesheet” href=”allbrowsers.css” type=”text/css” />
<!–[if lte IE 7]>
<link rel=”stylesheet” href=”iefix.css” type=”text/css” />
<![endif]–>
给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>
/* style for IE6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]–><!–[if IE 7]><style>
.gainlayout { zoom: 1; }
</style><![endif]–>
- zoom:1,它给IE5.5以上的所有版本里的任何元素layout(包括行内元素)，但是这个规则在IE5.0里没有效果；
- 未知的副作用（尽管行内元素表现的像行内块元素）；
- 如果一定要确定，zoom一定要被有条件的注释隐藏；
如果想得到一个更详尽的hasLayout触发和hasLayout在不同的IE版本里的比较的话，请参考这里：Thoughts on IE hack management.
IE Mac简短介绍：
IE Mac和IE for Windows是十分不同的，每一种都有自己的渲染引擎，IE Mac用任何方式都不知道hasLayout的行为，IE Mac渲染引擎是在向标准遵循模式靠近。
季氏安安IE layout详解的更多相关文章
- ExtJs常用布局--layout详解（含实例）
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- flutter系列之:flutter中常用的GridView layout详解
目录 简介 GridView详解 GridView的构造函数 GridView的使用 总结 简介 GridView是一个网格化的布局,如果在填充的过程中子组件超出了展示的范围的时候,那么GridVie ...
- flutter系列之:flutter中常用的Stack layout详解
[toc] 简介 对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等. 要实现这样的效果,我们需要在一个Im ...
- flutter系列之:flutter中常用的ListView layout详解
目录 简介 ListView详解 ListView中的特有属性 ListView的构造函数 ListView的使用 总结 简介 ListView是包含多个child组件的widget,在ListVie ...
- java日志框架系列（7）：logback框架Layout详解
1.Layout layout从字面意思来看就是排版.布局咯. 1.Layout简介 功能:负责把事件转换成字符串.Layout接口的格式化方法doLayout()负责将代表任何类型的事件的转换成一个 ...
- flutter系列之:flutter中常用的container layout详解
目录 简介 Container的使用 旋转Container Container中的BoxConstraints 总结 简介 在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介 ...
- 3.ExtJs常用布局--layout详解（含实例）
转自:https://blog.csdn.net/fifteen718/article/details/51482826
- View绘制详解(四)，谝一谝layout过程
上篇博客我们介绍了View的测量过程,这只是View显示过程的第一步,第二步就是layout了,这个我们一般译作布局,其实就是在View测量完成之后根据View的大小,将其一个一个摆放在ViewGro ...
随机推荐
- 14.5.2.2 autocommit, Commit, and Rollback
14.5.2.2 autocommit, Commit, and Rollback 在InnoDB,所有的用户活动发生在一个事务里, 如果自动提交模式是启用的, 每个SQL语句形成一个单独的事务.默认 ...
- 分页SQL取下一页
20条记录一页,扫描第2页就需要访问40条记录. SQL> select * from ( select * from ( select /*+ index_desc(a idx_page_3) ...
- 「Poetize7」电话线路
描述 每台电话都有一个独一无二的号码,用一个十位的十进制数字串表示.电话a和b之间能直接通信,当且仅当“a与b之间仅有一个数字不同”,或者“交换a的某 两位上的数字后,a与b相同”.而a.b之间建立通 ...
- joelonsoftware 读书摘录
joelonsoftware 读书摘录 <五个为什么> 1.“黑天鹅难题”,代表外来因素,是一个超出正常预料之外的事件. 2.丰田佐吉的“五个为什么”,当某个地方出现问题时,你就一 ...
- 图论（费用流）：BZOJ 4514 [Sdoi2016]数字配对
4514: [Sdoi2016]数字配对 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 820 Solved: 345[Submit][Status ...
- Eclipse启动jboss局域网无法访问的问题
在启动jboss的时候加上参数 -b 0.0.0.0(本地用localhost也能访问,用ip也能访问)
- Mac下Intellij IDea发布Java Web项目详解三 新建Module
准备工作1:新建第一个JavaWeb项目 Step4 添加两个module 4.1 右键[WebWorkSpace]-[New]-[Module] 4.2 重复 准备工作1:新建第一个JavaWeb项 ...
- POJ 3280 Cheapest Palindrome(水题)
题意:给定一个完全由小写字母组成的字符串s,对每个字母比如x(或a,b,c...z),在字符串中添加或者删除它分别需要花费c1['x']和c2['x']的代价,问将给定字符串变成回文串所需要的最少代价 ...
- bzoj3669: [Noi2014]魔法森林 lct
记得去年模拟赛的时候好像YY出二分答案枚举a,b的暴力,过了55欸 然后看正解,为了将两维变成一维,将a排序,模拟Kruskal的加边过程,同时维护1到n的最大值,加入一条边e(u,v,a,b)时有以 ...
- umlの用例图
我的总结是在看完uml学习之后又參考了同学借的<uml和ooad高速入门>的思路,利用齿轮带动的原理进行.废话不多说了.首先分析一下类图和用例图的联系与差别. 类图 用例图 类class ...