Absolutely Buggy II - Absolute boxes inside relative boxes

最新推荐文章于 2025-07-22 00:16:16 发布

pengju_guo

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量450

点赞数

分类专栏： IE BUG 文章标签： border class xhtml opera 浏览器 ie

IE BUG 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在网页布局中使用静态包含块与绝对定位元素，通过实例展示如何设置包含块为'relative'，以确保绝对定位元素正确显示在页面上，同时解释了不同浏览器的表现差异及解决方法。

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

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