如何让iframe自适应其内嵌的页面高度，即不出现纵向滚动条？当然是首先获取iframe内嵌文档自身的高度，再赋值给iframe。

获取iframe内嵌文档，有如下方法：

IE：

document.getElementById("myIframe").document；

FF：

document.getElementById("myIframe").contentWindow.document；

IE亦可写成FF的方法～···

PS：搞个页面，这两天就只弄这么个东西～···一个表格页面里面还嵌套了N层框架～····FF还报一大堆错，根本无法用Firebug调试，i sun～···搞死人～···一直想从顶层页面获取到其下层页面高度，但是始终获取不到正确值。最后在最底层页面获取其自身高度再传递到顶层页面～···over～···

有时间看两个～大大有益～···

矩形、椭圆工具[M]
裁剪工具 [C]
移动工具 [V]
套索、多边形套索、磁性套索 [L]
魔棒工具 [W]
喷枪工具 [J]
画笔工具 [B]
像皮图章、图案图章 [S]
历史记录画笔工具 [Y]
像皮擦工具 [E]
铅笔、直线工具 [N]
模糊、锐化、涂抹工具 [R]
减淡、加深、海棉工具 [O]
钢笔、自由钢笔、磁性钢笔 [P]
添加锚点工具 [+]
删除锚点工具 [-]
直接选取工具 [A]
文字、文字蒙板、直排文字、直排文字蒙板 [T]
度量工具 [U]
直线渐变、径向渐变、对称渐变、角度渐变、菱形渐变 [G]
油漆桶工具 [K]
吸管、颜色取样器 [I]
抓手工具 [H]
缩放工具 [Z]
默认前景色和背景色 [D]
切换前景色和背景色 [X]
切换标准模式和快速蒙板模式 [Q]
标准屏幕模式、带有菜单栏的全屏模式、全屏模式 [F]
临时使用移动工具 [Ctrl]
临时使用吸色工具 [Alt]
临时使用抓手工具 [空格]
打开工具选项面板 [Enter]
快速输入工具选项(当前工具选项面板中至少有一个可调节数字) [0]至[9]
循环选择画笔 <]或[>
选择第一个画笔 [Shift]+<]
选择最后一个画笔 [Shift]+[>
建立新渐变(在”渐变编辑器”中) [Ctrl]+[N]

新建图形文件 [Ctrl]+[N]
用默认设置创建新文件 [Ctrl]+[Alt]+[N]
打开已有的图像 [Ctrl]+[O]
打开为… [Ctrl]+[Alt]+[O]
关闭当前图像 [Ctrl]+[W]
保存当前图像 [Ctrl]+[S]
另存为… [Ctrl]+[Shift]+[S]
存储副本 [Ctrl]+[Alt]+[S]
页面设置 [Ctrl]+[Shift]+[P]
打印 [Ctrl]+[P]
打开“预置”对话框 [Ctrl]+[K]
显示最后一次显示的“预置”对话框 [Alt]+[Ctrl]+[K]
设置“常规”选项(在预置对话框中) [Ctrl]+[1]
设置“存储文件”(在预置对话框中) [Ctrl]+[2]
设置“显示和光标”(在预置对话框中) [Ctrl]+[3]
设置“透明区域与色域”(在预置对话框中) [Ctrl]+[4]
设置“单位与标尺”(在预置对话框中) [Ctrl]+[5]
设置“参考线与网格”(在预置对话框中) [Ctrl]+[6]
设置“增效工具与暂存盘”(在预置对话框中) [Ctrl]+[7]
设置“内存与图像高速缓存”(在预置对话框中) [Ctrl]+[8]

还原/重做前一步*作 [Ctrl]+[Z]
还原两步以上*作 [Ctrl]+[Alt]+[Z]
重做两步以上*作 [Ctrl]+[Shift]+[Z]
剪切选取的图像或路径 [Ctrl]+[X]或[F2]
拷贝选取的图像或路径 [Ctrl]+[C]
合并拷贝 [Ctrl]+[Shift]+[C]
将剪贴板的内容粘到当前图形中 [Ctrl]+[V]或[F4]
将剪贴板的内容粘到裖蛑?[Ctrl]+[Shift]+[V]
自由变换 [Ctrl]+[T]
应用自由变换(在自由变换模式下) [Enter]
从中心或对称点开始变换 (在自由变换模式下) [Alt]
限制(在自由变换模式下) [Shift]
扭曲(在自由变换模式下) [Ctrl]
取消变形(在自由变换模式下) [Esc]
自由变换复制的象素数据 [Ctrl]+[Shift]+[T]
再次变换复制的象素数据并建立一个副本 [Ctrl]+[Shift]+[Alt]+[T]
删除裖蛑械耐及富蜓∪〉穆肪?[DEL]
用背景色填充所选区域或整个图层 [Ctrl]+[BackSpace]或[Ctrl]+[Del]
用前景色填充所选区域或整个图层 [Alt]+[BackSpace]或[Alt]+[Del]
弹出“填充”对话框 [Shift]+[BackSpace]
从历史记录中填充 [Alt]+[Ctrl]+[Backspace]

调整色阶 [Ctrl]+[L]
自动调整色阶 [Ctrl]+[Shift]+[L]
打开曲线调整对话框 [Ctrl]+[M]
在所选通道的曲线上添加新的点(‘曲线’对话框中) 在图象中[Ctrl]加点按
在复合曲线以外的所有曲线上添加新的点(‘曲线’对话框中) [Ctrl]+[Shift]
移动所选点(‘曲线’对话框中) [↑]/[↓]/[←]/[→]
以10点为增幅移动所选点以10点为增幅(‘曲线’对话框中) [Shift]+[箭头]
选择多个控制点(‘曲线’对话框中) [Shift]加点按
前移控制点(‘曲线’对话框中) [Ctrl]+[Tab]
后移控制点(‘曲线’对话框中) [Ctrl]+[Shift]+[Tab]
添加新的点(‘曲线’对话框中) 点按网格
删除点(‘曲线’对话框中) [Ctrl]加点按点
取消选择所选通道上的所有点(‘曲线’对话框中) [Ctrl]+[D]
使曲线网格更精细或更粗糙(‘曲线’对话框中) [Alt]加点按网格
选择彩色通道(‘曲线’对话框中) [Ctrl]+[~]
选择单色通道(‘曲线’对话框中) [Ctrl]+[数字]
打开“色彩平衡”对话框 [Ctrl]+[B]
打开“色相/饱和度”对话框 [Ctrl]+[U]
全图调整(在色相/饱和度”对话框中) [Ctrl]+[~]
只调整红色(在色相/饱和度”对话框中) [Ctrl]+[1]
只调整黄色(在色相/饱和度”对话框中) [Ctrl]+[2]
只调整绿色(在色相/饱和度”对话框中) [Ctrl]+[3]
只调整青色(在色相/饱和度”对话框中) [Ctrl]+[4]
只调整蓝色(在色相/饱和度”对话框中) [Ctrl]+[5]
只调整洋红(在色相/饱和度”对话框中) [Ctrl]+[6]
去色 [Ctrl]+[Shift]+[U]
反相 [Ctrl]+[I]
从对话框新建一个图层 [Ctrl]+[Shift]+[N]
以默认选项建立一个新的图层 [Ctrl]+[Alt]+[Shift]+[N]
通过拷贝建立一个图层 [Ctrl]+[J]
通过剪切建立一个图层 [Ctrl]+[Shift]+[J]
与前一图层编组 [Ctrl]+[G]
取消编组 [Ctrl]+[Shift]+[G]
向下合并或合并联接图层 [Ctrl]+[E]
合并可见图层 [Ctrl]+[Shift]+[E]
盖印或盖印联接图层 [Ctrl]+[Alt]+[E]
将当前层下移一层 [Ctrl]+<]
将当前层上移一层 [Ctrl]+[>
将当前层移到最下面 [Ctrl]+[Shift]+<]
将当前层移到最上面 [Ctrl]+[Shift]+[>

激活下一个图层 [Alt]+<]
激活上一个图层 [Alt]+[>
激活底部图层 [Shift]+[Alt]+<]
激活顶部图层 [Shift]+[Alt]+[>
调整当前图层的透明度(当前工具为无数字参数的,如移动工具) [0]至[9]
保留当前图层的透明区域(开关) [/]
投影效果(在”效果”对话框中) [Ctrl]+[1]
内阴影效果(在”效果”对话框中) [Ctrl]+[2]
外发光效果(在”效果”对话框中) [Ctrl]+[3]
内发光效果(在”效果”对话框中) [Ctrl]+[4]
斜面和浮雕效果(在”效果”对话框中) [Ctrl]+[5]
应用当前所选效果并使参数可调(在”效果”对话框中) [A]
图层混合模式
循环选择混合模式 [Alt]+[-]或[+]
正常 [Ctrl]+[Alt]+[N]
阈值（位图模式） [Ctrl]+[Alt]+[L]
溶解 [Ctrl]+[Alt]+[I]
背后 [Ctrl]+[Alt]+[Q]
清除 [Ctrl]+[Alt]+[R]
正片叠底 [Ctrl]+[Alt]+[M]
屏幕 [Ctrl]+[Alt]+[S]
叠加 [Ctrl]+[Alt]+[O]
柔光 [Ctrl]+[Alt]+[F]
强光 [Ctrl]+[Alt]+[H]
颜色减淡 [Ctrl]+[Alt]+[D]
颜色加深 [Ctrl]+[Alt]+[B]
变暗 [Ctrl]+[Alt]+[K]
变亮 [Ctrl]+[Alt]+[G]
差值 [Ctrl]+[Alt]+[E]
排除 [Ctrl]+[Alt]+[X]
色相 [Ctrl]+[Alt]+[U]
饱和度 [Ctrl]+[Alt]+[T]
颜色 [Ctrl]+[Alt]+[C]
光度 [Ctrl]+[Alt]+[Y]
去色 海棉工具+[Ctrl]+[Alt]+[J]
加色 海棉工具+[Ctrl]+[Alt]+[A]
暗调 减淡/加深工具+[Ctrl]+[Alt]+[W]
中间调 减淡/加深工具+[Ctrl]+[Alt]+[V]
高光 减淡/加深工具+[Ctrl]+[Alt]+[Z]
全部选取 [Ctrl]+[A]
取消选择 [Ctrl]+[D]
重新选择 [Ctrl]+[Shift]+[D]
羽化选择 [Ctrl]+[Alt]+[D]
反向选择 [Ctrl]+[Shift]+[I]

路径变选区 数字键盘的[Enter]
载入选区 [Ctrl]+点按图层、路径、通道面板中的缩约图
按上次的参数再做一次上次的滤镜 [Ctrl]+[F]
退去上次所做滤镜的效果 [Ctrl]+[Shift]+[F]
重复上次所做的滤镜(可调参数) [Ctrl]+[Alt]+[F]
选择工具(在“3D变化”滤镜中) [V]
立方体工具(在“3D变化”滤镜中) [M]
球体工具(在“3D变化”滤镜中) [N]
柱体工具(在“3D变化”滤镜中) [C]
轨迹球(在“3D变化”滤镜中) [R]
全景相机工具(在“3D变化”滤镜中) [E]
显示彩色通道 [Ctrl]+[~]
显示单色通道 [Ctrl]+[数字]
显示复合通道 [~]
以CMYK方式预览(开关) [Ctrl]+[Y]
打开/关闭色域警告 [Ctrl]+[Shift]+[Y]
放大视图 [Ctrl]+[+]
缩小视图 [Ctrl]+[-]
满画布显示 [Ctrl]+[0]
实际象素显示 [Ctrl]+[Alt]+[0]
向上卷动一屏 [PageUp]
向下卷动一屏 [PageDown]
向左卷动一屏 [Ctrl]+[PageUp]
向右卷动一屏 [Ctrl]+[PageDown]
向上卷动10 个单位 [Shift]+[PageUp]
向下卷动10 个单位 [Shift]+[PageDown]
向左卷动10 个单位 [Shift]+[Ctrl]+[PageUp]
向右卷动10 个单位 [Shift]+[Ctrl]+[PageDown]
将视图移到左上角 [Home]
将视图移到右下角 [End]
显示/隐藏选择区域 [Ctrl]+[H]
显示/隐藏路径 [Ctrl]+[Shift]+[H]
显示/隐藏标尺 [Ctrl]+[R]
显示/隐藏参考线 [Ctrl]+[;]
显示/隐藏网格 [Ctrl]+[”]
贴紧参考线 [Ctrl]+[Shift]+[;]
锁定参考线 [Ctrl]+[Alt]+[;]
贴紧网格 [Ctrl]+[Shift]+[”]

显示/隐藏“画笔”面板 [F5]
显示/隐藏“颜色”面板 [F6]
显示/隐藏“图层”面板 [F7]
显示/隐藏“信息”面板 [F8]
显示/隐藏“动作”面板 [F9]
显示/隐藏所有命令面板 [TAB]
显示或隐藏工具箱以外的所有调板 [Shift]+[TAB]

文字处理(在”文字工具”对话框中)
左对齐或顶对齐 [Ctrl]+[Shift]+[L]
中对齐 [Ctrl]+[Shift]+[C]
右对齐或底对齐 [Ctrl]+[Shift]+[R]
左／右选择 1 个字符 [Shift]+[←]/[→]
下／上选择 1 行 [Shift]+[↑]/[↓]
选择所有字符 [Ctrl]+[A]
选择从插入点到鼠标点按点的字符 [Shift]加点按
左／右移动 1 个字符 [←]/[→]
下／上移动 1 行 [↑]/[↓]
左／右移动1个字 [Ctrl]+[←]/[→]
将所选文本的文字大小减小2 点象素 [Ctrl]+[Shift]+[<]
将所选文本的文字大小增大2 点象素 [Ctrl]+[Shift]+[>]
将所选文本的文字大小减小10 点象素 [Ctrl]+[Alt]+[Shift]+[<]
将所选文本的文字大小增大10 点象素 [Ctrl]+[Alt]+[Shift]+[>]
将行距减小2点象素 [Alt]+[↓]
将行距增大2点象素 [Alt]+[↑]
将基线位移减小2点象素 [Shift]+[Alt]+[↓]
将基线位移增加2点象素 [Shift]+[Alt]+[↑]
将字距微调或字距调整减小20/1000ems [Alt]+[←]
将字距微调或字距调整增加20/1000ems [Alt]+[→]
将字距微调或字距调整减小100/1000ems [Ctrl]+[Alt]+[←]
将字距微调或字距调整增加100/1000ems [Ctrl]+[Alt]+[→] 键

介绍

Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这 个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

hasLayout — 定义

“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。

这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有“layout”。

微软的开发者们认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。

术语

当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 为此被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。

而“无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个“无layout祖先”。

给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

问题种种

hasLayout 的问题不管新手还是老手，不管设计师或者程序员可能都遇到过。Layout 在显示盒子时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的孩子元素。

一个元素是否具有“layout”可能会引发如下的一些问题：

• IE 很多常见的浮动 bug 。
• 元素本身对一些基本属性的异常处理问题。
• 容器和其子孙之间的边距重叠(margin collapsing)问题。
• 使用列表时遇到的诸多问题。
• 背景图像的定位偏差问题。
• 使用脚本时遇到的浏览器之间处理不一致的问题。

上面的列表只是列出一个大概，也不完善。下面的文章将尽可能详细彻底的描述有无“layout”所带来的各种问题。

Layout 从何而来

不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定 。也就是说没有“layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

CSS hacks

下面用于触发 haslayout 的 hack 已经经过 IE6 及以下版本测试。今后版本的IE有可能会对此做不同处理。如果新版本浏览器发布我们会重新整理这部分内容。

John Gallant 和 Holly Bergevin 在2003年发布的 Holly hack ：

/* \*/
* html .gainlayout { height: 1%; }
/* */

• 可以让 IE5+ 的任意元素获得 layout，除了标准兼容模式 IE6 中的内联元素。
• 一般都很有效，除了在某些极少情况下，需要用 height:0 或者 1px 更好一些。
• 和 overflow: hidden 不相容，除非在 IE6 的标注兼容模式下(因为这时如果父元素没有定高，那么height: 1% 会被变回 height: auto)。

或者我们可以用 underscore hack:

.gainlayout { _height: 0; }

另外，更具有向后兼容性的方法是使用 条件注释(conditional comments):

<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->

在条件注释中链接一个专门对 IE/Win 做修正的外部样式表文件，也不失为一个安全有效的好方法：

<link rel="stylesheet" href="allbrowsers.css" type="text/css" />

<!--[if lte IE 6]>
<link rel="stylesheet" href="iefix.css" type="text/css" />
<![endif]-->

我们更倾向于使用 height: 0 和 1px —— 并主张始终使用 height 除非它和别的什么东西冲突 (overflow: hidden)。对于取值，我们则倾向于避免 1% ，因为它可能会(虽然很少)引起一些问题。

height 不能应用于标准模式下的内联元素。在这种情况下我们可以用 display: inline-block 或 zoom: 1。

我们曾看过一些把 Holly hack 真的当作 holy(神圣的) hack 盲目使用的情况，比如对浮动元素使用或者对已经具有特定宽度的元素也使用这个 hack。要记住这个 hack 的目的不是要给某个元素加一个高度，而只是要触发 hasLayout = True 而已。

不要给所有元素设置 layout：* {_height: 1px;}。所谓过犹不及，获得 layout 不等于获得灵丹妙药，它只是用来改变渲染模式。

<!--[if lt IE 7]><style>
/* IE 6 + IE5.5 + IE5.0 所用样式*/
.gainlayout { height: 0; }
</style><![endif]-->

<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* 或者其他任何以后可能需要的东西 */
</style><![endif]-->

关于IE Mac 的小问题

IE Mac 和 windows 下的 IE 是完全不同的两个东西，它们各自拥有自己的渲染引擎，IE Mac 就全然不知“hasLayout”(或contenteditable)所谓何物。相比之下 IE Mac 的渲染引擎要更标准兼容一点，比如 height 就是被当作 height 处理，没有别的效果。因此针对“hasLayout”的 hacks 和别的解决方法(特别是通过使用 height 或 width 属性的)往往对 IE Mac 来说是有害的，所以需要对其隐藏。更多的关于 IE Mac 相关的问题可以在 IE Mac, bugs and oddities pages 找到。

MSDN 文档

MSDN 中涉及到 hasLayout 这个 MS 属性的地方寥寥无几，而具体解释 layout 和 IE 渲染模型之间关系的则少之又少。

在IE4的时候，除了未经绝对定位也未指定宽高的内联元素，几乎所有元素都有某种 layout(MSDN ——此文已被修改¹)。在这种早期的layout概念中，像 border, margin, padding 这些属性被称作“layout属性”，它们是不能应用到一个简单的内联元素上的。换句话说，“拥有layout”就可以粗略理解成：“可以拥有这几个属性”。

MSDN 上仍然使用 layout 属性这种说法， 只是含义变了，它们和拥有 layout 的元素已经没有什么关系了。在 IE5.5 中方才引入了 MS 的这个专有属性 hasLayout，也只是某种内部的标志位而已。

在 IE5.5 中，MSHTML Editing Platform(即可以通过设置<body contenteditable=true>来允许用户实时编辑、拖动 layout 元素以及调整其尺寸等)的文档中描述了三个和 layout 相关的重要特性：

和 layout 自身相关的内部工作机制直到2005年8月才有相应文档描述，当时由于 The Web Standards Project 和微软的特别工作小组的原因，Markus Mielke [MSFT] 打开了深入讨论的大门：

分析

我 们的分析试图解释在已知案例下发生了什么事情，这种分析也应该可以作为未知案例下的指导。但我们这种试图利用种种测试案例投石探路的黑箱测试方法，是注定 无法消除黑箱的神秘感的——我们无法回答“为什么”的问题。我们只能去尝试了解整个“hasLayout”模式的工作框架，以及它会怎样影响网页文档的渲 染。因此，最终我们只能提供一些指导方针(而且只能是指导方针，而不是绝对的解决方案)。

我们认为他们所指的是一个小窗体。一个 layout 元素的内部内容是完全独立的，而且也无法影响其边界外的任何内容。

而 MS 属性 layout 只是某种标志位：一旦它被设定，这个元素就会拥有 layout“特性”，这包括体现在其自身以及其非 layout 孩子元素身上的特殊性能——比如浮动和层叠等。

这种独立性也许正可以解释为什么 layout 元素通常比较稳定，而且它们可以让某些 bug 消失。这种情况的代价有二，一是偏离了标准，二是它没有考虑到今后可能因此出现的 bug 和问题。

MS 的“页面”模式，从符号学角度考虑，可以看做是由很多互不相关的小的区块构成，而 HTML 和 W3C 的模式则认为“页面”模式应该是叙述完备的，故事性的相关信息区块构成的。

各种情况的详细说明

堆叠，分层和 layout

IE/Win 中似乎有两种分层和堆叠顺序：

• 一种是(伪)试图采用CSS的模式：Effect of z-index value to RP and AP blocks
• 还 有一种是由“hasLayout”及其孪生兄弟“contenteditable”的行为产生的堆叠顺序。正如在上面相对定位的例子中展现的那样，在 layout 影响下的堆叠现象就好像 Harry Houdini (译者注：魔术师，以纸牌魔术成名)的拿手戏法儿一样。

两 种堆叠模式虽互不相容，但却共存于IE的渲染引擎中。经验之谈：调试的时候，两种情况都要考虑到。我们可能会有规律地在下拉菜单或者类似的复杂菜单中看到 相关问题，因为它们往往牵涉到堆叠，定位和浮动等诸多令人头疼的问题。给那些 z-index 定位的元素 layout 是一种可能的修正方法，不过也不限于此，这里只是提醒一下。

混乱的 contenteditable

如果给一个 HTML 标签设定 contenteditable=true 属性，比如<body contenteditable=true>，将会允许对该元素以及其 layout 子元素进行实时的编辑、拖动改变尺寸等操作。你可以把这属性用在浮动元素或者一个有序列表中的 layout 列表元素上看看效果。

为了对元素进行操作(编辑它们)，“contenteditable”和“hasLayout”为那些 hasLayout 返回 true 的元素引入了一套单独的堆叠顺序。

Editing Platform(此文已从 MSDN 删除²)继承了 layout 概念，对 layout 的误解多是因 contenteditable 而起即可作为证明(那些某种程度上集成了 IE 编辑引擎的应用软件多暗含着对 layout 概念的某种强制向后兼容性)。

• More on contenteditable

和 CSS 规范类似的地方

你的 MSIE 页面在别的浏览器中一团糟？我们可没必要让这种事情发生。如果使用恰当，任何好的浏览器都能摆平 MSIE 的页面——只要你使用一些正确的 CSS。

利用 hasLayout 和“新的块级格式化范围”之间的细微相似之处，我们可以有几种方法在标准兼容浏览器中重新实现 hasLayout 的“包含浮动元素”效果，和一些“浮动元素旁边的元素”所特有的效果。

• Reverse engineering series
• Simulations

Quirks 模式

关于这种渲染模式的的信息，请参考我们的 quirks 模式章节。

Layout ——结论

整个 layout 概念和一些基本 CSS 概念是不兼容的，即包含，排列，浮动，定位和层叠等。

由于页面中元素或有或没有 layout，会导致 IE/Win 的行为和 CSS 规范相违背。

拥有 layout ——另外一个引擎？

有时候要解释清楚某种行为是不可能的：就比如 hasLayout，会根据它的状态选择两种不同渲染引擎的一种使用，而且每一种都有其自己的 bug 和怪异之处。

不可消除的 bug

<!--css-->
#layout{
　　position:absolute;
　　min-width:400px;
　　_width:400px;
　　min-height:300px;
　　_height:300px;
　　border:1px solid #F00;
　　background:#EEE;}
　　#title,#content{
　　white-space:nowrap;
　　background:#CCC;
　　border-bottom:2px solid #000;
　　font-weight:bold;
}
#content{
　　border:none;
　　padding:10px 0;
　　background:#FFF;
　　font-size:12px;
　　font-weight:normal;
}
<!--css-->
<!--xhtml-->
<div id="layout">
　　<h2 id="title">如何用 Javascript</h2>
　　<p id="content">坦白说，起先我对短短的五行代码</p>
</div>
<!--xhtml-->

测试无忧上一个问题引出的另外一个问题。由于设置了min-width和width，white-space在FF和IE中都会因为内容过多将#layout宽度撑开。按道理#title和#content的宽度都会自动伸展到与#layout一致，但是IE6中并不会自动伸展到和#layout一致的宽度～···只保持在最初#layout宽400px时100%的宽度～···

同时发现，当为#title，#content设置width:100%的时候,IE7也会出现和IE6同样的问题，个人觉得可能是hasLayout引发的～···

这个问题现在人没找到合理的解决办法，记下～···

<!--
*{color:#000; font-size:18px; font-family:Arial, Helvetica, sans-serif, "宋体";}
#header{height:100px; background:#999;}
#layout{position:relative; margin-top:10px;}
#left{height:400px; width:200px; background:#EEE; position:absolute;left:0;top:0;}
#right{height:400px; width:200px; background:#EEE;position:absolute;right:0;top:0;}
#center{margin:0 210px; height:600px; background:#666;}
-->
<!--xhtml-->
<div id="header">header</div>
<div id="layout">
　　<div id="left">left</div>
　　<div id="center">center</div>
　　<div id="right">right</div>
</div>
<!--xhtml-->

刚才在BI上有人问，嘿嘿，好像平时很少做这些东西，即使做了也没印象，很长一段时间都是埋着头写，很简单的代码。一直不喜欢用绝对定位，但是渐渐发现绝对定位用好了，也是很爽的呀～···