代码之家 › 专栏 › 技术社区 › Wodzu

需要CSS Div Borders的帮助,IE和Firefox之间的不同视图

border html firefox internet-explorer css

1

Wodzu · 技术社区 · 15 年前

我在展示一幅不同的图像,展示了 div IE和火狐之间的元素。IE以正确的方式显示边框,但Firefox不显示。正如你可能注意到的,黑色边框 BorderDiv 不尊重其父母的事实 div 高度为78像素。它不尊重最外层的高度。更复杂的是,在不尊重最外层的情况下画出边界的右侧。 div 也。

alt text

我在这里迷路了。我需要做什么才能在Firefox中获得与IE相同的结果?请注意,我想要宽度和高度 边界分隔符 等于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>

谢谢。

1 回复 | 直到 15 年前

1

3

Jess Telford Mark Elliot 15 年前

实际上是相反的:火狐是正确的,IE是错误的。

这是因为IE的 box model .

DIV“borderDIV”拥有其容器DIV(“contentcolumn”)的100%高度,即78px。除此之外,还添加了边框、填充和边距。

为什么不将border添加到“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,以考虑边框大小。

另外,你可能想避免 quirksmode 在IE中,它将使用正确的盒子模型。