Проблема с IE7 CSS - почему между моими тегами h2 и h4 есть пробел?

#css #internet-explorer #internet-explorer-7

Вопрос:

У меня необычная проблема с CSS в IE7. Вот мой HTML и css код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
.generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}
.generic_panel h4 {background-color:green; margin:0px; display:block; float:left;}  
.generic_panel h2 {background-color:blue; margin:0px; display:block; clear:both; float:none;}
</style>

    <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <section id="content">
<section id="payment" class="generic_panel">

        <h4><a href="http://mysite.com">Invoice # 000095</a></h4>
    <h2>Remaining Invoice Amount: $17.5<br/>
        <span>Original Amount: $17.50</span>
    </h2>
</section>
    </section>

</body>
</html>

При просмотре в IE7 между тегами h4 и h2 есть пробел. Я пытался избавиться от этого пробела. Я не понимаю, почему свойства .generic_panel h2 {margin:0px;} и .generic_panel h4 {margin:0px;} не избавляются от этого пробела.

Что еще более странно, если я удалю КАКОЙ-либо из padding:15px или display:block или overflow:hidden из

 .generic_panel {background-color:red; padding:15px; display:block; overflow:hidden;}

затем он избавляется от пробела между h4 и h2. Почему свойства css в my .generic_panel влияют на интервал между моими тегами h4 и h2?

Пожалуйста, помогите мне понять, что происходит с $ @ # % # $ % $….

Ответ №1:

Вы можете исправить это, добавив zoom: 1 в .generic_panel h2 .

Ваш исходный код с проблемой в IE7:http://jsbin.com/evaxi3
Применен тот же код с исправлением:http://jsbin.com/evaxi3/2

Эта проблема связана с отсутствием hasLayout — добавление zoom: 1 предоставляет элементу «layout» и исправляет его.

1. Ну, потому что это исправляет известное поведение IE (7). Вы прочитали по ссылке hasLayout мой ответ? Ссылка внутри этого документа такова: satzansatz.de/cssd/acidicfloat.html — обратите внимание на «различия» между совместимыми FF и IE. В вашем случае IE7 просто не работает в соответствии со спецификацией CSS, пока вы не примените «layout» к элементу.

Ответ №2:

Просто к сведению, браузеры указывают свои собственные значения полей и отступов, которые считаются значениями по умолчанию, если вы не переопределите их сбросом CSS.

Пример сброса css:

 * html
{
    padding:0;
    margin:0;
}

h2, h4
{
    margin:20px 5px;
    padding: 5px;
}

Если вы сделаете это, вам придется указать отступы и поля для каждого элемента, поскольку * html сбрасывает все значения в 0 (или независимо от того, что вы им задаете).

Ответ №3:

Я понятия не имею, что происходит, это довольно странная ошибка. Казалось, я смог исправить это для вас.

Работает для IE7 / 8 / 9, Opera, Firefox

 .generic_panel {background-color:red; padding:15px; display:block;  overflow:hidden;}
.generic_panel h4 {background-color:green; margin:0px; float:left;  width:auto;}  
.generic_panel h2 {background-color:blue; margin:0px; clear:both;  float:left;}

Ответ №4:

Проблема в том, что float не совсем правильно работает в IE7.

Это работает и выглядит одинаково в IE9, 8, 7 и FF4. У меня нет других для тестирования.

     .generic_panel
    {
        background-color: silver;
        padding: 15px;
        display: block;
        overflow: hidden;
    }
    .generic_panel h4
    {
        background-color:white;
        margin: 0px;
        display:block;
        float: left;
        clear:right;
    }
    .generic_panel h2
    {
        background-color:Gray;
        margin: 0px;
        display: inline-block;
        width:100%;
        clear:both;
    }

Я также изменил ваши цвета, чтобы сохранить мои глаза … 😉