Ars Longa, Vita Brevis

Прав ли FireFox?

При решении одной задачи с вертикальным выравниванием и плавающими элементами внутри ячейки таблицы, натолкнулся на одну очень интересную особенность браузеров, построенных на движке Gecko, а также Internet Exploret 6 и 7: плавающие элементы конфликтуют со статическими инлайновыми или псевдо-инлайновыми элементами.

Например:

[-]
View Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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.

Можно, конечно, попробовать возразить, опираясь на следующий параграф:

<blockquo