Проблема с плавающими элементами в FireFox и IE6/7
Прав ли FireFox?
При решении одной задачи с вертикальным выравниванием и плавающими элементами внутри ячейки таблицы, натолкнулся на одну очень интересную особенность браузеров, построенных на движке Gecko, а также Internet Exploret 6 и 7: плавающие элементы конфликтуют со статическими инлайновыми или псевдо-инлайновыми элементами.
Например:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floating and FireFox</title>
</head>
<body>
<div style="height: 100px; width: 100%; background: red;">
<span>Text</span>
<div style="width: 100px; height: 100%; float: left; background: yellow;">Float</div>
</div>
</body>
</html>
В FireFox, IE6 и IE7 это будет выглядеть примерно так:
А так — в Opera, Konqueror, Safari или IE8:
Если следовать спецификации CSS 2.1,
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.
Можно, конечно, попробовать возразить, опираясь на следующий параграф:
If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Но на мой взгляд, это не очень убедительно: <span> — inline-элемент и поэтому не может растягиваться на всю длину контейнера. Если мы поменяем направление float с left на right, то заметим, что такое поведение сохранится:
Всё-таки FireFox здесь неправ… Обидно, что даже IE8 правильно рисует…
Лечение: поменять span и div местами. Либо задать span ширину и отправить в плавание.
