IE7 маржа падает в дополнение - PullRequest
Новая
       3

IE7 маржа падает в дополнение

5 голосов
/ 06 октября 2011

Почему отступ внешнего элемента 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.13IE7 collapses the green paddingЭто в FF 6.0.2FF and Chrome add the green padding and blue margins

@ David - idk У меня только IE7@Faust - я прикрепил скриншоты сейчас.Я проверил их с помощью XRAY, чтобы увидеть, что они разные.@veritas - Изменение DOCTYPES, похоже, ничего не изменило.Я проверил и IE7 рендеринг в режиме стандартов.

Ответы [ 5 ]

1 голос
/ 26 октября 2011

Попробуйте добавить float:left.

Не лучший вариант, но иногда работает.

0 голосов
/ 18 октября 2011

попробуйте 

    <!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>
0 голосов
/ 06 октября 2011

Следующее работает, но мне это не нравится.Мне не нравится вручную устанавливать высоту строки в .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'>&nbsp;<div class='margin'>Content</div></div>
    </body>
</html>

Может кто-нибудь улучшить или предложить лучшее решение?

0 голосов
/ 17 октября 2011

Я гуглил по этому вопросу и ничего не нашел.Потому что это довольно редкая ситуация, когда вам нужно использовать как отступы родителя, так и отступ ребенка.Но если это неизбежно для вас, может быть, лучше применить отступ в 150px к родительскому элементу специально для IE6, 7?На мой взгляд, это лучше, чем вставить пробел, применить к строке line-height и 0, а не переопределять это свойство для всех внутренних элементов. 

.padding
        {
            padding: 50px;
            background-color: green;
            width: 500px;
        }
*html .padding
        {
            padding: 150px;
        }
.margin
        {
            margin: 100px;
            background-color: blue;
        }
0 голосов
/ 06 октября 2011 
.padding
        {
            padding: 50px;
            background-color: green;
            zoom: 1;
            width: 500px;
            overflow:hidden; /* blocks margin collapse */
        }

edit: нужен обходной путь 

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

кстати, не очень хорошо ... Не думаю, что есть что-то лучше, я пробовал много хаков

: (

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...