Layout

最新推荐文章于 2022-07-22 17:22:14 发布

转载最新推荐文章于 2022-07-22 17:22:14 发布 · 329 阅读

转载同时被 2 个专栏收录

11 篇文章

订阅专栏

向大牛学习

4 篇文章

订阅专栏

本文详细介绍了浏览器中的布局(layout)概念，探讨了哪些元素默认具有布局特性，以及如何通过特定的CSS属性来触发或重置布局。此外，还提供了一系列实用的CSS Hack技巧，帮助开发者解决不同版本IE浏览器中的布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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]–>