IE7保证金折叠成填充
[英]IE7 Margin Collapses Into Padding
问题描述
为什么外部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' />
<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>
这是在IE 7.0.5730.13中
这是在FF 6.0.2中
@David - idk我只有IE7
@Faust - 我现在附上截图。 我用XRAY检查了它们，看它们是不同的。
@veritas - 改变DOCTYPES似乎没有改变任何东西。 我检查过，IE7正在标准模式下渲染。
5 个解决方案
解决方案1
1 2011-10-25 20:17:25
尝试添加float:left 。
不是最好的选择，但有时可行。
解决方案2
0
.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>
顺便说一下，不是那么好......我认为没有更好的东西，我已经尝试了很多黑客
:(
解决方案3
0 2011-10-06 18:11:56
以下作品，但我不喜欢它。 我不喜欢在.margin中手动设置行高，我不喜欢放入＆nbsp;
<!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>
有人可以改进或提供更好的解决方案吗？
解决方案4
0 2011-10-17 15:32:50
我搜索了那个问题但什么都没发现。 因为当您需要同时使用父级填充和子级边距时，这种情况很少发生。 但是如果你不可避免的话，可能最好将150px padding-top专门应用于IE6,7的父元素？ 在我看来，它比插入空格更好，将line-height应用于0，而不是将此属性重新定义为所有内部元素。
.padding
{
padding: 50px;
background-color: green;
width: 500px;
}
*html .padding
{
padding: 150px;
}
.margin
{
margin: 100px;
background-color: blue;
}
解决方案5
0 2011-10-18 07:26:22
尝试这个
<!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>
IE7 问题的边距/填充 - 如何解决？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.