CSS定位-IE问题

我的布局有问题...它应该很简单，但我无法正确理解。它适用于Firefox，但不适用于IE。CSS定位-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>

来源

2010-09-08 marius

标题说明了一切。 – Paul 2010-09-08 12:21:47

什么版本的IE？在8它运行得很好。 http://jsfiddle.net/nxBAn/1/ – 2010-09-08 12:26:12

问题是由那里是没有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>

而且你不需要在rightBar的底部的像素为0，将锚它。

来源

2010-09-08 12:26:25 moose56

这是所有只是这个小代码 – marius 2010-09-08 12:27:29

首先，你有一个宽度设置在rightBar，所以宽度不会改变。

您也有顶部和底部设置为0 ...我不知道如何工作。

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

来源

2010-09-08 12:31:21 Martin

没有人说我想改变宽度...我想改变rightBar的高度。顶部和底部为0使得它遍布父容器。它在FF和CHROME上工作，但不在IE上...... IT无法将高度设置为固定值，因为内容...如果内容div中的文字变大，rightBar必须展开....多数民众赞成在 – marius 2010-09-08 12:36:22

@marius - 这个评论矛盾你的问题陈述“没有人说我想改变宽度”，“它应该有相同的高度“你想改变哪个，宽度还是高度？ – 2010-09-08 12:46:34

这是一个特定于IE6的问题。它在IE7，IE8和IE9中运行良好。

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

但是，如果你必须支持IE6，问题是IE6不能算出元素有多高，除非你明确指定高度，所以它不知道如何处理bottom：0。如果你将高度样式添加到外部div，内部样式会突然找出底部所需的位置。

添加高度：0在IE6中也不会产生任何问题，因为它实际上将它视为最小高度，所以它会在需要时调整大小。不幸的是，其他浏览器会正确处理高度样式，因此您无法为IE6修复它而无需为其他浏览器打开它。

如果您必须使其在IE6中工作，则需要使用浏览器黑客手段使修复对其他浏览器不可见。丑陋的东西。

来源

2010-09-08 12:39:32 Spudley

thx伙计，就是这样..不知道我仍然在我的电脑上IE6 ...反正ty :-) – marius 2010-09-08 12:44:10

CSS定位-IE问题

回答

相关问题