12.12.2009, 09:55
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
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>
|
|
12.12.2009, 12:14
|
 |
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
As for me,
<div style="clear: both; height: 0px; overflow: hidden">
никогда особо лишним не будет. Зато будет работать железобетонно во всех браузерах настоящего и будущего.
Нарываясь на холивар, все же скажу: используя клир разметкой, мы немного засираем html; используя clearfix, мы немного засираем css. А если нет разницы...  |
|
13.12.2009, 14:20
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от subzey
|
|
никогда особо лишним не будет
|
почему никогда? А если слева/справа от div'а должен быть float?
|
Сообщение от subzey
|
|
Нарываясь на холивар, все же скажу: используя клир разметкой, мы немного засираем html; используя clearfix, мы немного засираем css. А если нет разницы...
|
т.е. ты предпочитаешь засирать html? Css, кстати, может быть генерированным, т.е. незасранным (;
а height: 0px зачем? |
|
13.12.2009, 23:51
|
|
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
Сообщение от x-yuri
|
|
почему никогда? А если слева/справа от div'а должен быть float?
|
И?
|
Сообщение от x-yuri
|
|
т.е. ты предпочитаешь засирать html?
|
Ну, если это Вас устраивает, пожалуйста, я не пропагандирую. Такое поведение флоатов, может, и не нужно конкретно Вам, но оно нормально. И нормально, чтобы "закрыть" флоат, использовать содежимое с clear.
|
Сообщение от x-yuri
|
|
Css, кстати, может быть генерированным, т.е. незасранным (;
|
Вы, наверное, имели в виду :after {content: "..."}. Но, ведь, текстовое содержимое так или иначе засирается ненужными точками. А если сайт будет прослушиваться в голосовом браузере? "speak: none" я что-то не заметил.
Да и улучшению читаемости и семантики css клирфикс, имхо, не способствует.
|
Сообщение от x-yuri
|
|
а height: 0px зачем?
|
IE6. Указание "px" необязательно, это, скорее, привычка. |
|
14.12.2009, 00:43
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
тогда clear: both все испортит
|
Сообщение от subzey
|
|
Ну, если это Вас устраивает, пожалуйста, я не пропагандирую
|
я всего лишь уточнял
|
Сообщение от subzey
|
|
Вы, наверное, имели в виду :after {content: "..."}
|
нет, я имел в виду динамический css
|
Сообщение от subzey
|
|
Да и улучшению читаемости и семантики css клирфикс, имхо, не способствует.
|
я не говорил, что использую clearfix, я рассказыал про проблемы с ним
|
Сообщение от subzey
|
|
IE6. Указание "px" необязательно, это, скорее, привычка.
|
я не про px спрашивал, а про height: 0[px]
я просто плохо понял, что Вы имели в виду. Overflow: hidden понятно зачем. Height: 0 - непонятно. Clear: both - не очень понятно. Речь шла о том, чтобы "float'ы в контейнер запихнуть"
Последний раз редактировалось x-yuri, 14.12.2009 в 02:28.
|
|
14.12.2009, 12:10
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от x-yuri
|
|
Css, кстати, может быть генерированным, т.е. незасранным (;
|
HTML-то почаще является генерированным.
|
Сообщение от subzey
|
|
А если сайт будет прослушиваться в голосовом браузере? "speak: none" я что-то не заметил.
|
А вы, приводя такие аргументы, прослушиваете верстаемые вами сайты в голосовом браузере? |
|
20.12.2009, 22:25
|
|
Аспирант
|
|
Регистрация: 22.06.2009
Сообщений: 43
|
|
|
Сообщение от subzey
|
<div style="clear: both; height: 0px; overflow: hidden">
никогда особо лишним не будет. Зато будет работать железобетонно во всех браузерах настоящего и будущего.
|
согласен с этим на все 100, только height ненужна, а только для ie6 на всякий случай ставлю. Всё остальное маразмы или попытка показать я круче... |
|
21.12.2009, 14:19
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Vitaly
|
|
а только для ie6 на всякий случай ставлю
|
вот интересует вопрос зачем? Все равно он, если не ошибаюсь, меньше 2px высоту не сделает
|
Сообщение от Vitaly
|
|
Всё остальное маразмы или попытка показать я круче...
|
все остальное - старые методы, как указано в обоих ссылках  |
|
21.12.2009, 14:25
|
|
Новичок на форуме
|
|
Регистрация: 19.02.2008
Сообщений: 9,177
|
|
|
Сообщение от x-yuri
|
|
Все равно он, если не ошибаюсь, меньше 2px высоту не сделает
|
Если обнулить font-size или overflow в hidden выставить, то сделает. |
|
10.01.2010, 16:15
|
 |
Аспирант
|
|
Регистрация: 10.01.2010
Сообщений: 33
|
|
|
Сообщение от x-yuri
|
|
Глючит, например, в ff 3.5.5, если URL содержит якорь #asd: содержимое div.clearfix скроллиться вверх
|
Честно говоря не очень понял, каким образом происходит скроллинг. Если в строке адреса ссылка имеет вид url#asd то страница будет прокручиваться к месту якоря #asd... |
|
|
|
