Question

我的布局有问题......应该很简单，但我无法做到正确。它适用于Firefox但不适用于IE。

问题：div rightBar 应该调整内容大小。如果有很多文本，它应该具有相同的高度（因此，我在绝对定位时使用顶部和底部）内容是正确的，它只是 rightBar 不会调整大小。

这是我的标记：

<div id="container" style="position:relative; width:100px;">
  <div id="content" style="position:relative; margin-right:10px;"></div>
  <div id="rightBar" style="position:absolute; right:0; top:0; bottom:0px; width:10px;"></div>
</div>

Answer 1

首先关闭...你在rightBar上设置了宽度，因此宽度不会改变。

你也将Top和Bottom设置为0 ......我不知道它是如何工作的。

如果您希望高度相同，请将其设置为值。

Answer 2

问题是由没有doctype引起的。这会导致IE以Quirks模式呈现HTML。如果您使用的是IE 8，则可以从工具菜单中选择开发人员工具，它将说明文档模式作为开发人员工具窗口的顶部。

请尝试使用此标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="container" style="position:relative; width:100px;">
        <div id="content" style="position:relative; margin-right:10px;"></div>
        <div id="rightBar" style="position:absolute; right:0; top:0; bottom:0; width:10px;"></div>
    </div>
</body>
</html>

此外，你不需要右栏底部的px，因为0会锚定它。

Answer 3

这是IE6特有的问题。它在IE7，IE8和IE9中工作正常。

第一点建议：放弃对IE6的支持;它比它的价值更麻烦。

但是如果必须支持IE6，问题是IE6无法确定元素的高度，除非您明确指定高度，因此它不知道如何处理底部：0。如果你向外部div添加一个高度样式，那么内部div会突然出现底部所需的位置。

添加高度：0也不会在IE6中引起任何探测器，因为它实际上将它视为最小高度，因此如果需要它会调整大小。不幸的是，其他浏览器会正确处理高度样式，所以你不能在不破坏其他浏览器的情况下为IE6修复它。

如果你必须在IE6中运行它，你需要使用浏览器黑客来使修复程序对其他浏览器不可见。丑陋的东西。

CSS定位 - IE问题

3 个答案: