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 a
positioned container for the
absolute boxes. (red and blue borders) It is dimensioned horizontally by margins and
vertically 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 needed
for 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
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
