Absolutely Buggy II - Absolute boxes inside relative boxes

来源：互联网发布：php 共享内存编辑：程序博客网时间：2024/04/29 20:30

The set-up: 你想在正常流下获得一个静态包含块，在里面放一个绝对定位元素。我们知道这个元素将根据离它最近的已定位祖先来计算它的位置，因此，包含块设置为 "position:relative" 来保证它在流中，就是为绝对定位元素提供一个 positioned holder 。

The demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css"">body {    font-family: verdana,sans-serif;    font-size: 80%;}div#container1 {background-color: #FFFF88;border: 6px solid #009900;margin: 5px 7%;position: relative;}div.upperleft, div.upperright, div.lowerleft, div.lowerright {height: 30px;    position: absolute;    width: 30px;}div.upperleft {border: 6px solid #FF0000;    left: 0;    top: 0;}div.upperright {border: 6px solid #FF0000;    right: 0;    top: 0;}div.lowerleft {border: 6px solid #0000FF;    bottom: 0;    left: 0;}div.lowerright {border: 6px solid #0000FF;    bottom: 0;    right: 0;}.boxtext {font-family: 'times new roman',serif;    font-size: 1.2em;    margin: 0;    padding: 5px 9%;}pre {color: #880000;    margin: 1em 0 20px 15%;}</style></head><body><div id="container1"><div class="upperleft"></div><div class="upperright"></div><div class="lowerleft"></div><div class="lowerright"></div><p class="boxtext">This box (".container1", green border) has been given 'position: relative', making it apositioned container for theabsolute boxes. (red and blue borders) It is dimensioned horizontally by margins andvertically by content. It does <em>not have</em> 'width' and 'height'.The corner boxes are given 'position: absolute',and placed in the corners by using the value '0' on 'top', 'bottom', 'left', and 'right', as neededfor each element. Example:</p><pre>div.lowerleft {   left: 0;   bottom: 0;   border: 6px solid #00f;}</pre></div></body></html>

Screenshots:

Mozilla/Opera7/Win2k/Konq3.3 Represents the ideal.
IE 5.5/Win2k Dropped boxes. At least it's fixable.
IE6/Win2k Dropped boxes, but more 'fun' than IE5.5
Opera6/Win2k Bad, but fixed in Op7.
IE5.x/Mac/9.2.2/OS X A real head scratcher.
Op5/OS X Dropped boxes; all boxes shifted left as a group?
IE4.5/Mac/9.2.2 Similar to last one.
icab2.8/Mac/OSX My favorite!
Navagator4.0.8/Mac/OSX It's what you'd expect from NN4.
Navagator4.79/Mac/OSX It had to get better, and it did.

Fixes: 当给包含容器设置任何宽度或高度就可以消除IE/Win的bug。注意，设置宽度同时可以修复在小盒子跟绿色边框的 right/bottm之间的 1px rounding error gaps (at some screen sizes) 。See a similar Mozilla bug.

Update July 2, 2008: width/height fix 实际上是给IE中的盒子提供了 "hasLayout" ，但是现在有一个更好的方式来处理它。 better way

IE/Mac bug需要设置一个高度给 relative container ，否则当在它下面摆放其他盒子时，它会认为 container 的高度是 0px 。

你可能注意到在容器的边框和 corner boxes 之间有 1px gaps 。这是 1px Rounding Error ，你会在一些情况下，在任何浏览器中都发现这个问题。

原文地址：

http://www.positioniseverything.net/abs_relbugs.html