需要CSS DIV边框的帮助，IE和FireFox之间的视图不同

Question

我正在显示IE和FireFox之间的div元素呈现边框差异的图像。 IE会以正确的方式显示边框，但FireFox不会。 您可能会注意到， BorderDiv的黑色边框BorderDiv不尊重其父div高度为78像素这一事实。 相反，它尊重大多数外部div的高度。 为了使事情复杂化，绘制边框的右侧时也没有考虑最外面的div 。

替代文字

我在这里迷路了。 我需要做些什么才能在FireFox中获得与IE中相同的结果？ 请注意，我希望BorderDiv宽度和高度等于100％，我不想明确设置它。

这是我的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;">
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div>
      </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div>
</div>
</BODY>
</HTML>

谢谢。

Answer 1

实际上是另一回事：Firefox是正确的，而IE是不正确的。

这是由于IE对box模型的不良实现。

div“ BorderDiv”的容器div（“ ContentColumn”）的高度为100像素，即78px。 然后，最重要的是添加边框，填充和边距。

为什么不将边框添加到“ ContentColumn” div并完全摆脱“ BorderDiv” div：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red">
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;">
        <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;">
            right
        </div>
    </div>
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">
        left
    </div>
</div>
</BODY>

</HTML>

编辑将“ ContentColumn”修改为具有76px的高度，以考虑边框大小。

另外，您可能希望避免在IE中使用quirksmode ，因此它将使用正确的框模型。

需要CSS DIV边框的帮助，IE和FireFox之间的视图不同

问题描述

1 个解决方案

解决方案1
3 已采纳 2010-11-23 10:25:54

需要CSS DIV边框的帮助，IE和FireFox之间的视图不同

问题描述

1 个解决方案

解决方案1 3 已采纳 2010-11-23 10:25:54

解决方案1
3 已采纳 2010-11-23 10:25:54