Прав ли 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.

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

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 ширину и отправить в плавание.

Добавить в закладки

Связанные записи

20
Май
2008

Комментарии к статье «Проблема с плавающими элементами в FireFox и IE6/7»  »

К статье «Проблема с плавающими элементами в FireFox и IE6/7» комментариев пока нет. Не хотите ли стать первым?

Подписаться на RSS-ленту комментариев к статье «Проблема с плавающими элементами в FireFox и IE6/7» Trackback URL: http://blog.sjinks.org.ua/css/150-problem-with-floating-elements-in-firefox-and-i6-7/trackback/

Оставить комментарий к записи «Проблема с плавающими элементами в FireFox и IE6/7»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя