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

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

0 голосов
/ 06 мая 2011

У меня необычная проблема с 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 в моем .generic_panel влияют на расстояние между моими тегами h4 и h2?

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

Ответы [ 4 ]

5 голосов
/ 06 мая 2011

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

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

1 голос
/ 06 мая 2011

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

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

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

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

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

0 голосов
/ 06 мая 2011

Проблема в том, что 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;
    }

Я также изменил ваш цвет, чтобы спасти мои глаза ...;)

0 голосов
/ 06 мая 2011

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

Работа для 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;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...