返回 p.i.e.

范例

这篇是拿绝对定位(absolute positioning)当题材。div#container（棕色粗框）是用“left”和“top”定位，并有着相等的高度和宽度(80px)。它包含两个绝对区块（黑色和绿色边框）、一个以固定(static) div 表示的内容区域（灰色区块），而且也设定了补白（环绕着灰色区块的淡蓝色部分）。 注意：如果没有修正 div#container 的尺寸，浏览器的表现就相差很大。如果想知道更详细的信息，请参考 绝对定位的臭虫 II。

绿色和黑色边框的区块是分别为 top/left 和 bottom/right 套用“0px”，使它们位于相对的角落。它们也分别包了一个用同样方式定位的小区块。所有的区块都是正方形的，而且都套用了 Tantek 的技巧（针对 IE5.x 区块模型的错误，请参考源文件）。

其下是这个范例的几个屏幕截图(screenshot)。

表现

想当然地，这个范例对较早期的浏览器来说很困难。

强大的 Gecko 引擎(Moz, Nav6/7)表现得毫无瑕疵。 IE5/Mac 和 Mozilla 一样有着完美的表现。Opera 7 也能正确显示。

以 IE 的表现来说，IE/Win 算是不错了。但注意到那些被垂直拉长的小区块了吗？这表示 IE 不允许这些绝对区块的“高度(height)”小于“行高(line-height)”。然而这只针对那些大区块或小区块。中等尺寸的区块却很神奇地可以使用“height:0px”。

不过这个臭虫几乎不会影响到页面，而不像 Opera 6 那么严重。

老天！我的背又在痛了！

请注意，在 Opera 6 里黑色和绿色边框区块加总起来所占的尺寸，会正好等于灰色内容区域的大小。（！）看来 Opera 绘制范例的方法是先放置好容器(container)，但不设定任何补白或边框，并依此放置被包着的绝对区块。直到最后才把补白跟边框套用在容器区块上，让它们往右下方延伸，却不去动那些被包着的区块。图中的小区块也有一样的状况。

这是个大问题（如果你在乎 Opera 6 的话）。别以为你可以用 div 容器(wrapper)做修正，这个臭虫也会感染 div。

修正

别在这种容器上使用边框或补白。如果你坚持这么做，可以把一个绝对定位的 div 放在容器的上方或下方，以提供替代的边框或补白。

有个非常令人振奋的消息，Opera 7已经修正了这个问题，并且在绝对定位上有非常好的表现。请朝着挪威的方向行三鞠躬礼。

呜呼

用 Op7.1 的可能会注意到范例中的灰色区域不见了，取代它的是一个嵌套的 div 背景。 Chris Hester 向我指出了这一点，关于最新的 Opera 臭虫请看 这个页面。

原作者:
Holly 'n John   Contact me ©positioniseverything
最后修订: May11, 2003
写于 June 2, 2002

繁体中文翻译：lincc
简体中文翻译:onestab