Html IE7页边距塌陷为填充
在下面的示例中，为什么外部div的填充会塌陷到内部div的边缘Html IE7页边距塌陷为填充,html,css,internet-explorer-7,Html,Css,Internet Explorer 7,在下面的示例中，为什么外部div的填充会塌陷到内部div的边缘 <!DOCTYPE html> <html> <head> <title>Col Padding</title> <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css'
<!DOCTYPE html>
<html>
<head>
<title>Col Padding</title>
<link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
<style type='text/css'>
.padding
{
padding: 50px;
background-color: green;
zoom: 1;
width: 500px;
}
.margin
{
margin: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class='padding'><div class='margin'>Content</div></div>
</body>
</html>
Col填充
.填充
{
填充：50px；
背景颜色：绿色；
缩放：1；
宽度：500px；
}
边缘
{
利润率：100像素；
背景颜色：蓝色；
}
内容
这在FF 6.0.2中
@David-idk我只有IE7
@浮士德-我现在附上了截图。我用X光检查了它们，看它们是否不同。
@veritas-更改doctype似乎没有改变任何东西。我检查了，IE7正在标准模式下渲染。
.padding
{
padding: 50px;
background-color: green;
zoom: 1;
width: 500px;
overflow:hidden; /* blocks margin collapse */
}
<style type="text/css">
.padding
{
background-color: green;
width: 500px;
}
.p
{
padding:10px;
}
.margin
{
margin: 10px;
background-color: blue;
}
</style>
<div class="padding">
<div class="p">
<div class="margin">Content</div>
</div>
</div>
.填充
{
背景颜色：绿色；
宽度：500px；
}
P
{
填充：10px；
}
边缘
{
利润率：10px；
背景颜色：蓝色；
}
内容
：（以下方法很有效，但我不喜欢。我不喜欢在.margin中手动设置行高，也不喜欢在
<!DOCTYPE html>
<html>
<head>
<title>Col Padding</title>
<link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
<style type='text/css'>
.padding
{
padding: 50px;
background-color: green;
width: 500px;
line-height: 0px;
}
.margin
{
margin: 100px;
background-color: blue;
line-height: 16px;
}
</style>
</head>
<body>
<div class='padding'> <div class='margin'>Content</div></div>
</body>
</html>
Col填充
.填充
{
填充：50px；
背景颜色：绿色；
宽度：500px；
线高：0px；
}
边缘
{
利润率：100像素；
背景颜色：蓝色；
线高：16px；
}
内容
有谁能改进或提供更好的解决方案吗？我在谷歌上搜索了这个问题，但什么也没找到。因为在这种情况下，很少需要同时使用父元素的填充和子元素的边距。但如果这是不可避免的，那么是否最好将150px填充顶部应用到父元素，特别是IE6、7？在我看来，这比n插入空格，将“线高度”应用于0，然后将此属性重新定义为所有内部元素
.padding
{
padding: 50px;
background-color: green;
width: 500px;
}
*html .padding
{
padding: 150px;
}
.margin
{
margin: 100px;
background-color: blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Col Padding</title>
<link rel='stylesheet' type='text/css' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
<style type='text/css'>
body{
font-size:1em;
}
.padding
{
padding: 150px;
background-color: green;
width: 500px;
line-height: 0px;
}
.padding span
{
background-color: blue;
padding:15px 5px;
display:block;
color:#fff;
}
</style>
</head>
<body>
<div class='padding'><span>Content</span></div>
</body>
</html>
Col填充
身体{
字号：1em；
}
.填充
{
填充：150px；
背景颜色：绿色；
宽度：500px；
线高：0px；
}
.填充跨度
{
背景颜色：蓝色；
填充：15px 5px；
显示：块；
颜色：#fff；
}
内容
float:left这不是最好的选择，但有时会起作用。是吗？我还注意到一个IE7标签，这只发生在IE7中吗？IE8在兼容性视图模式下的行为（粗略的IE7模拟）看起来和FireFox+Chrome一样。如果你有真正的IE7，你能发布一个屏幕截图吗？这是我所期望的——或者这就是你想要解释的吗？也许使用旧的doctype会有所帮助？IE7不理解HTML5我明白，我也在尝试…fu****互联网explorer@JohnK附加了一些代码，顺便说一下，不是很好，是一个包装器元素可能是必需的。我很想看看这个问题是否有解决方法。这似乎不起作用。此外，我不知道*html.padding规则是用于什么的，因为它将被.padding规则覆盖。这是有效的，尽管它完全避开了边距与填充的问题，所以它只是作为替代我没有回答。