Поле IE7 сворачивается в заполнение

ProgramBox

Поле IE7 сворачивается в заполнение

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#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' />
        <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 — Изменение типов документов, похоже, ничего не изменило. Я проверил, и IE7 отображается в стандартном режиме.

1. Так ли это? Я также заметил тег IE7, это происходит только в IE7?

2. Поведение этого в IE8 в режиме просмотра совместимости (грубая симуляция IE7) выглядит так же, как в FireFox Chrome. Если у вас есть настоящий IE7, не могли бы вы опубликовать снимок экрана? И это так, как я и ожидал — или это то, для чего вам нужно объяснение?

3. Может быть, использование более старого doctype поможет? Ie7 не понимает HTML5

Ответ №1:

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

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

Ответ №2:

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

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

🙁

1. Я вижу, я тоже пытаюсь … fu **** internet Explorer

2. @JohnK добавил какой-то код, кстати, не очень хороший, возможно, необходим элемент-оболочка. Мне интересно посмотреть, есть ли какое-то обходное решение для этого дерьма! проголосовал за вопрос

Ответ №3:

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

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

Ответ №4:

попробуйте это

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

Ответ №5:

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

 .padding
        {
            padding: 50px;
            background-color: green;
            width: 500px;
        }
*html .padding
        {
            padding: 150px;
        }
.margin
        {
            margin: 100px;
            background-color: blue;
        }