Firefox неправильно истолковывает поле нижнееМожет быть, ошибка? - PullRequest
Новая
       6

Firefox неправильно истолковывает поле нижнееМожет быть, ошибка?

4 голосов
/ 11 марта 2011

здесь минимальная версия для воспроизведения ошибки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <style type="text/css">
        .clear{clear:both;}
        .col{float:left;}
        .row{margin-bottom:30px;background-color:red;}
    </style>
</head>
<body>
    <div class="row">

        <div class="col">Lorem Ipsum</div>
        <div class="clear"></div>
    </div>
</body>
</html>

Это ошибка Firefox, или я что-то неправильно понимаю. Редактировать: Забыл объяснить проблему. Когда я использую margin-bottom для .row в сочетании с плавающей точкой в ​​.col, тогда элемент будет опущен на то же значение, что и .row margin-bottom имеет

Ответы [ 7 ]

2 голосов
/ 11 марта 2011

Я не совсем уверен, почему Firefox ведет себя не так, как другие браузеры.Это как-то связано с сворачивающимися полями .

Однако вы можете легко это исправить (без перехода в Firefox, согласованность между браузерами) с помощью:

  • Добавление overflow: hidden к .row в качестве альтернативного способа очистки поплавка.

Затем можно удалить <div class="clear"></div>, поскольку он больше не требуется.

1 голос
/ 11 марта 2011

Хорошо выглядит здесь:

enter image description here

JSFiddle

Вы будете хотеть padding-bottom:30px; вместо margin-bottom:30px;

0 голосов
/ 28 марта 2012

тридцатка , вы правы - это из-за обвала полей. Я был в похожей ситуации. Однако нельзя сказать, что это ошибка только FireFox. На самом деле, в Chrome мои поля не разрушались даже без разрыва поплавка. В FireFox, с другой стороны, поля для меня упали, несмотря на разбитый float (будь то с переполнением: hidden / auto, очищенный элемент между ними или что-то еще). Как ни странно, поля между ребенком и родителем рушатся, что не должно происходить в соответствии со спецификациями W3C. Кроме того, положительный отступ исправил эту проблему.

В заключение могу сказать, что ни один браузер не на 100% соответствует стандартам W3C / IEEE / ISO. Однако мне все равно, какой браузер соответствует какому именно стандарту. Важно то, что все они соответствуют одному и тому же стандарту. Этого не происходит, и я сомневаюсь, что это когда-нибудь произойдет.

0 голосов
/ 11 марта 2011

Проблема связана с удалением плавающих элементов из обычного потока, и вы ожидаете, что этот элемент будет действовать так же.Firefox действует как надо.Извините, у меня нет времени разобраться с этим.

0 голосов
/ 11 марта 2011

Я думаю, проблема для него в том, что когда вы используете firebug и делаете margin-bottom больше ... тогда тело будет падать.

Если вы используете рост, то тело не будет опускаться. Проверено в FF 3.6.15

Или используйте отступы с полем ... тогда тело не сдвинется вниз.

Добавить к моим комментариям здесь: 

.row {
    background-color: red;
    margin-bottom: 30px;
    padding-bottom: 1px;
}
0 голосов
/ 11 марта 2011

нет ошибки, создайте еще один div с class = "row" внизу, и вы увидите нижнее поле: 

<div class="row">
    <div class="col">Lorem Ipsum</div>
    <div class="clear"></div>
</div>
<!-- here is 30px space -->
<div class="row">
    <div class="col">Lorem Ipsum</div>
    <div class="clear"></div>
</div>
0 голосов
/ 11 марта 2011

Я думаю, вы предполагаете, что он должен заполнить красный ряд 30px внизу?Вы хотите заполнить дно тогда.Поле margin-bottom создаст зазор в 30px между .row и следующим элементом под ним.

check this fiddle , что я имею в виду

...