Question

Hello StackOverflow社区，我遇到了一个令人困惑的问题，我很惊讶我没有早点遇到这个问题。

如果我忽略了一些简单的事情，我会道歉 - 我做了大量的Google和StackOverflow搜索无济于事。

我的问题是，当将填充应用于Div时，容器会在Firefox / Chrome中按指定的填充量拉伸，但不会在IE中伸展。我看到了添加“display：inline;”的建议。或“display：inline-block;”解决问题，但这对我有效。

这是一个渲染的例子：

这个例子的代码：

<html>
<head>

<style type="text/css">
#div1 {
background-color:black;
width:400px;
height:300px;
padding-top:10px;
}

#div2 {
background-color:red;
width:400px;
height:280px;
padding-top:10px;
}

#div3 {
background-color:blue;
width:400px;
height:260px;
padding-top:10px;
}

#div4 {
background-color:green;
width:400px;
height:200px;
}
</style>

</head>
<body>

<div id="div1">
<div id="div2">
    <div id="div3">
    </div>
</div>
</div>
<div id="div4">
</div>

</body>

</html>

我错过了什么？任何帮助将不胜感激。

谢谢。

Answer 1

<!DOCTYPE ... >是您所缺少的。 IE以Quirks模式渲染，其中框模型是边框而不是内容框。

CSS Padding Stretching Divs：Internet Explorer Vs.镀铬/火狐

1 个答案: