IE7保证金折叠成填充

Question

IE7保证金折叠成填充

Joh*_*n K 5 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' />
        <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>

Run Code Online (Sandbox Code Playgroud)

这是在IE 7.0.5730.13中

这是在FF 6.0.2中

@David - idk我只有IE7
@Faust - 我现在附上了截图.我用XRAY检查了它们,看它们是不同的.
@veritas - 改变DOCTYPES似乎没有改变任何东西.我检查过,IE7正在标准模式下渲染.

Answer 1

小智 0

.padding
        {
            padding: 50px;
            background-color: green;
            zoom: 1;
            width: 500px;
            overflow:hidden; /* blocks margin collapse */
        }

Run Code Online (Sandbox Code Playgroud)

编辑：需要一个解决方法

    <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>

Run Code Online (Sandbox Code Playgroud)

顺便说一句，不太好......我不认为有更好的东西，我已经尝试了很多技巧

:(

归档时间：	14 年，1 月前
查看次数：	1379 次
最近记录：	14 年前