Html CSS定位-IE问题_Html_Css - Fatal编程技术网

Html CSS定位-IE问题

html css

Html CSS定位-IE问题,html,css,Html,Css,我的布局有问题。。。这应该很简单，但我就是做不好。它适用于Firefox，但不适用于IE 问题：div rightBar应根据内容调整大小。如果有很多文本，它应该有相同的高度（因此，我使用了绝对定位的顶部和底部），内容是好的，它的工作只是右栏不会调整大小这是我的标记： <div id="container" style="position:relative; width:100px;"> <div id="content" style="position:relative

我的布局有问题。。。这应该很简单，但我就是做不好。它适用于Firefox，但不适用于IE

问题：div 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>

该问题是由于没有doctype造成的。这会导致IE以怪癖模式呈现HTML。如果您使用的是IE8，您可以从工具菜单中选择开发者工具，它会在开发者工具窗口的顶部显示文档模式

请尝试以下标记：

<!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将锚定它。

首先。。。您在rightBar上设置了宽度，因此宽度不会改变

您还将顶部和底部设置为0。。。我不知道这是怎么回事

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

这是IE6特有的问题。它在IE7、IE8和IE9中运行良好

第一条建议：放弃对IE6的支持；这件事太麻烦了

但如果您必须支持IE6，问题是除非您明确指定高度，否则IE6无法计算元素的高度，因此它不知道如何处理底部：0。如果将高度样式添加到外部div，则内部div将突然确定底部需要的位置

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

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

什么版本的IE？在8路中，它运行得非常好。没有人说我想改变宽度。。。我想更改右栏的高度。从上到下到0使其伸展到整个父容器。。它适用于FF和CHROME，但不适用于IE。。。由于内容的原因，无法将高度设置为固定值。。。如果content div中的文本变大，右栏必须展开。。。。这就是问题所在deal@marius-此评论与您的问题陈述“没有人说我想更改宽度”和“它应该具有相同的高度”相矛盾，您想更改哪个，宽度还是高度？thx dude，就是这样。。不知道我的电脑上还有IE6。。。（泰：-）