дополнительное вертикальное пространство в IE после очистки - PullRequest
Новая
       11

дополнительное вертикальное пространство в IE после очистки

8 голосов
/ 23 января 2009

Я создал простую сетку элементов div, оставив их плавающими, и пустой элемент div с клиром в конце каждой строки.

Это прекрасно работает в Firefox, но в IE я получаю дополнительное вертикальное пространство между строками. Я пытался применить метод "clearfix", но, должно быть, я что-то не так делаю.

Почему IE вставляет дополнительное вертикальное пространство и как от него избавиться? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        root {
            display: block;
        }

        body {
            background: white;
        }

        .colorChip {
            position:relative;
            float: left;
            width: 20px;
            height: 20px;
            margin: 2px;
            border-style: solid;
            border-width: 1px;
            border-color: black;
        }

        .clear {
            clear: both;
        }

        .clearfix {
            display:inline-block;
        }

        .clearfix:after, .container:after {
            clear:both;
            content:".";
            display:block;
            height:0;
            visibility:hidden;
        }

        * html .clearfix {
            height:1%;
        }
        .clearfix {
            display:block;
        }

    </style>
    <!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
</style>
<![endif]-->

  </head>

  <body>
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div>
    <div class="colorChip" style="background: rgb(190,170,113)"></div>
    <div class="colorChip" style="background: rgb(190,250,113)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div>
    <div class="colorChip" style="background: rgb(215,197,154)"></div>
    <div class="colorChip" style="background: rgb(243,225,181)"></div>
    <div class="clear"></div>
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div>
    <div class="colorChip" style="background: rgb(129,118,92)"></div>
    <div class="colorChip" style="background: rgb(155,144,116)"></div>
    <div class="clear"></div>
  </body>
</html>

Ответы [ 6 ]

14 голосов
/ 23 января 2009

IE немного смешно о пустых <div> с - ему нравится давать им высоту строки текста.

Если вы измените .clear на это, оно уменьшится до 1 пикселя: 

    .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
    }

Поместите цвет фона, чтобы увидеть, что происходит

4 голосов
/ 17 марта 2009 
.clear {
    clear: both;
    height: 0px;
    overflow: hidden;
}

Изменение его на 0px работает лучше ..

2 голосов
/ 28 января 2010

Без этого он работает в IE6, но не IE7, с ним он работает в IE7, но добавляет высоту в IE6. Нет слов, чтобы описать мою ненависть к этому браузеру.

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

У меня была эта проблема с ie8 и использовался следующий 

.clear
{
    clear:both;
    height:0;
    width:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow: hidden;
    font-size:0px;
}
1 голос
/ 17 марта 2011

Высота: 0px у меня не сработала в IE 8. Кроме того, я не хотел, чтобы высота составляла 1px, потому что тогда на моем div была бы белая линия 1px с серым фоном, и я не хотел установить специальный цвет фона для каждого экземпляра класса = "очистить" div. Я пробовал высоту строки: 0; и он отлично работал в IE8, IE7 и IE6 (мне все равно, что старше этого) и FF 3.6, дополнительное вертикальное пространство не добавлялось. 

.clear {
    clear: both;
    line-height: 0;
    overflow: hidden;
}
0 голосов
/ 11 марта 2011
...