Question

我正在展示IE和FireFox之间呈现div元素边界的差异图像。 IE以正确的方式显示边框但FireFox没有。您可能会注意到，BorderDiv接缝的黑色边框不尊重其父div高度为78像素的事实。而不是它尊重大多数外部div的高度。更复杂的是，边框的右侧也是在不尊重最外层div的情况下绘制的。

alt text

我迷失在这里。我需要做什么才能在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 model的执行不好。

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 个答案: