CSS Padding Stretching Divs：Internet Explorer与。镀铬/火狐

Question

您好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与。镀铬/火狐

问题描述

1 个解决方案

解决方案1
3 已采纳 2011-11-03 05:10:16

CSS Padding Stretching Divs：Internet Explorer与。 镀铬/火狐

问题描述

1 个解决方案

解决方案1 3 已采纳 2011-11-03 05:10:16

CSS Padding Stretching Divs：Internet Explorer与。镀铬/火狐

解决方案1
3 已采纳 2011-11-03 05:10:16