Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   clearfix и ff 3.5.5 (https://javascript.ru/forum/xhtml-html-css/6653-clearfix-i-ff-3-5-5-a.html)

x-yuri 12.12.2009 09:55

clearfix и ff 3.5.5
 
да, есть методы получше. Просто столкнулся с этой проблемой и решил поделиться. Ну и может кто-нибудь сможет что-нибудь интересное рассказать (;

речь идет о способе, позволяющем "пофиксить" высоту контейнера с учетом его float'ов. Глючит, например, в ff 3.5.5, если URL содержит якорь #asd: содержимое div.clearfix скроллиться вверх

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

h1 { margin: 0; }
#container { overflow: hidden;
             background: red; }

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

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

</head>
<body>
<div id="container">
    <div class="clearfix">
        <h1>H1</h1>
        <div id="asd"></div>
    </div>
</div>
</body>
</html>

subzey 12.12.2009 12:14

As for me,
<div style="clear: both; height: 0px; overflow: hidden">
никогда особо лишним не будет. Зато будет работать железобетонно во всех браузерах настоящего и будущего.

Нарываясь на холивар, все же скажу: используя клир разметкой, мы немного засираем html; используя clearfix, мы немного засираем css. А если нет разницы... :)

x-yuri 13.12.2009 14:20

Цитата:

Сообщение от subzey
никогда особо лишним не будет

почему никогда? А если слева/справа от div'а должен быть float?

Цитата:

Сообщение от subzey
Нарываясь на холивар, все же скажу: используя клир разметкой, мы немного засираем html; используя clearfix, мы немного засираем css. А если нет разницы...

т.е. ты предпочитаешь засирать html? Css, кстати, может быть генерированным, т.е. незасранным (;

а height: 0px зачем?

subzey 13.12.2009 23:51

Цитата:

Сообщение от x-yuri (Сообщение 37862)
почему никогда? А если слева/справа от div'а должен быть float?

И?

Цитата:

Сообщение от x-yuri (Сообщение 37862)
т.е. ты предпочитаешь засирать html?

Ну, если это Вас устраивает, пожалуйста, я не пропагандирую. Такое поведение флоатов, может, и не нужно конкретно Вам, но оно нормально. И нормально, чтобы "закрыть" флоат, использовать содежимое с clear.

Цитата:

Сообщение от x-yuri (Сообщение 37862)
Css, кстати, может быть генерированным, т.е. незасранным (;

Вы, наверное, имели в виду :after {content: "..."}. Но, ведь, текстовое содержимое так или иначе засирается ненужными точками. А если сайт будет прослушиваться в голосовом браузере? "speak: none" я что-то не заметил.

Да и улучшению читаемости и семантики css клирфикс, имхо, не способствует.

Цитата:

Сообщение от x-yuri (Сообщение 37862)
а height: 0px зачем?

IE6. Указание "px" необязательно, это, скорее, привычка.

x-yuri 14.12.2009 00:43

Цитата:

Сообщение от subzey
И?

тогда clear: both все испортит

Цитата:

Сообщение от subzey
Ну, если это Вас устраивает, пожалуйста, я не пропагандирую

я всего лишь уточнял

Цитата:

Сообщение от subzey
Вы, наверное, имели в виду :after {content: "..."}

нет, я имел в виду http://javascript.ru/forum/xhtml-htm...skijj-css.html

Цитата:

Сообщение от subzey
Да и улучшению читаемости и семантики css клирфикс, имхо, не способствует.

я не говорил, что использую clearfix, я рассказыал про проблемы с ним

Цитата:

Сообщение от subzey
IE6. Указание "px" необязательно, это, скорее, привычка.

я не про px спрашивал, а про height: 0[px]

я просто плохо понял, что Вы имели в виду. Overflow: hidden понятно зачем. Height: 0 - непонятно. Clear: both - не очень понятно. Речь шла о том, чтобы "float'ы в контейнер запихнуть"

Kolyaj 14.12.2009 12:10

Цитата:

Сообщение от x-yuri
Css, кстати, может быть генерированным, т.е. незасранным (;

HTML-то почаще является генерированным.

Цитата:

Сообщение от subzey
А если сайт будет прослушиваться в голосовом браузере? "speak: none" я что-то не заметил.

А вы, приводя такие аргументы, прослушиваете верстаемые вами сайты в голосовом браузере?

Vitaly 20.12.2009 22:25

Цитата:

Сообщение от subzey (Сообщение 37792)
<div style="clear: both; height: 0px; overflow: hidden">
никогда особо лишним не будет. Зато будет работать железобетонно во всех браузерах настоящего и будущего.

согласен с этим на все 100, только height ненужна, а только для ie6 на всякий случай ставлю. Всё остальное маразмы или попытка показать я круче...

x-yuri 21.12.2009 14:19

Цитата:

Сообщение от Vitaly
а только для ie6 на всякий случай ставлю

вот интересует вопрос зачем? Все равно он, если не ошибаюсь, меньше 2px высоту не сделает

Цитата:

Сообщение от Vitaly
Всё остальное маразмы или попытка показать я круче...

все остальное - старые методы, как указано в обоих ссылках ;)

Kolyaj 21.12.2009 14:25

Цитата:

Сообщение от x-yuri
Все равно он, если не ошибаюсь, меньше 2px высоту не сделает

Если обнулить font-size или overflow в hidden выставить, то сделает.

Cuprum 10.01.2010 16:15

Цитата:

Сообщение от x-yuri
Глючит, например, в ff 3.5.5, если URL содержит якорь #asd: содержимое div.clearfix скроллиться вверх

Честно говоря не очень понял, каким образом происходит скроллинг. Если в строке адреса ссылка имеет вид url#asd то страница будет прокручиваться к месту якоря #asd...


Часовой пояс GMT +3, время: 04:56.