Комментарии 75
Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))
Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden
во всех браузерах?
По-моему да, во всех. Вот тест fu2k.org/alex/css/testcases/overflowhiddenplusanchor#para1
НЛО прилетело и опубликовало эту надпись здесь
Весьма занятно. Возьму на заметку.
overflow:hidden лучше стараться не использовать. Кажись ие6 не всегда положительно на него реагирует.
Да и в разных браузерах он будет выглядеть не совсем одинаково.
Да и в разных браузерах он будет выглядеть не совсем одинаково.
в разных браузерах он выглядит одинаково. в IE не работает совсем, но свойство hasLayout тоже создаёт контекст форматирования. нужно стараться его использовать
— IE6 вообще на это не реагирует
— Во всех браузерах будет одинаково, включая IE7+
Ваше высказывание звучит как «я что-то примерно знаю, но не уверен точно что, поэтому скажу что-нибудь такое»…
— Во всех браузерах будет одинаково, включая IE7+
Ваше высказывание звучит как «я что-то примерно знаю, но не уверен точно что, поэтому скажу что-нибудь такое»…
Хорошая подача, иллюстрации и текст…
Наглядно!
Наглядно!
НЛО прилетело и опубликовало эту надпись здесь
в следующей статье я расскажу как пользоваться чудесной возможностью overflow без использования этого свойства (а значит не боятся, что контент будет обрезан)
кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах
кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах
С удовольствием прочту продолжение. У Вас подача материала хорошая.
НЛО прилетело и опубликовало эту надпись здесь
Был прав, но ошибся с тем как они включают hasLayout: прочитайте то, что по заголовком «But what about IE?». IE не поддерживает :after, поэтому всё только через hasLayout— можно задать height, можно как у них zoom:1.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
в ff2 замечательно работает -moz-inline-stack
но инлайн блоки ничем не лучше флоатов…
но инлайн блоки ничем не лучше флоатов…
НЛО прилетело и опубликовало эту надпись здесь
https://developer.mozilla.org/En/Mozilla_CSS_Extensions
тем, что используются не по назначению ;-)
тем, что используются не по назначению ;-)
Ни -moz-inline-stack, ни -moz-inline-box не прокатывают, если вдобавок, необходимо внутри элемента спозиционировать абсолютно другой элемент (в смысле absolute внутри relative).
-moz-inline-stack? Почему-то ни гугл, ни яху о нем не слыхивали…Руку на отсечение отдаю, что вы искали с приставкой "-", и конечно же ничего не нашли. :)
НЛО прилетело и опубликовало эту надпись здесь
Не замечательно вы по вкладывайте в такие «инлайновые блоки» текст, а еще лучше картинки и F5 понажимайте, ох какие, как правильно выразился господин SelenIT, «непредсказуемые фокусы» вы увидете — смотреть страшно, и никак не исправить, что самое плохое. Текст «сбивается в кучу», с картинками еще хуже, при чем не всегда, и очень не приятно бывает «дебажить»
Единственное что более или менее помогало, либо
Но вот что всегда приятно удивляло — правильная работа инлайновых блоков в IE6 )
Единственное что более или менее помогало, либо
display: table-cell;, либо display: inline; float: left; + еще что-то для одинакового отображения с остальными браузерами, естественно это подключалось через хаки только для FF2, но это соответственно только если от блоков не требуется быть position: relative; или других «исключительно блочных» свойств.Но вот что всегда приятно удивляло — правильная работа инлайновых блоков в IE6 )
стэк — это всё-таки не блок ;-)
https://developer.mozilla.org/en/XUL_Tutorial/Stack_Positioning
заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.
https://developer.mozilla.org/en/XUL_Tutorial/Stack_Positioning
заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.
НЛО прилетело и опубликовало эту надпись здесь
Побольше бы таких полезных заметок. Спасибо.
А упомянутый вами тег br семантичен? По моему, нет.
думаю, семантичней чем пустой див)
а что вы сами скажите о
а что вы сами скажите о
<div class="clear"></div>?
Я скажу, что это удобная конструкция =)
BR — это перевод строки, т.е. элемент визуального форматирования, т.е. что-то
DIV — это пустой элемент, т.е. ничто
Соотв. DIV выглядит более уместно, если речь идёт про семантику. И уж тем более класс
DIV — это пустой элемент, т.е. ничто
Соотв. DIV выглядит более уместно, если речь идёт про семантику. И уж тем более класс
clear выглядит умнее атрибута clear.НЛО прилетело и опубликовало эту надпись здесь
Мне лично больше нравится див, почему-то. Хотя он тут не намного семантичнее(
Вот хочется чтобы код был аккуратненьким, без всего лишнего, а на практике всегда всякие левые дивы получаются, и т.д.((
Вот хочется чтобы код был аккуратненьким, без всего лишнего, а на практике всегда всякие левые дивы получаются, и т.д.((
А вообще, по поводу стопроцентной семантики кода, использования блочной верстки, соответствию стандартов, считаю, что всегда нужно руководствоваться здравым смыслом и в первую очередь беспокоиться не о валидности кода, а о соотношении цена/качество.
Конечно, никто не запрещается для саморазвития писать «сверхправильный» код, но когда несовершенство браузеров, которые до сих пор довольно кривые, то правильность кода отпадает на второй план и остается лишь вопрос совместимости со всеми браузерами.
Мне гораздо легче пожертвовать всей семантикой и стандартами, взамен более производительной работы и хорошей совместимости со всеми браузерами.
Конечно, никто не запрещается для саморазвития писать «сверхправильный» код, но когда несовершенство браузеров, которые до сих пор довольно кривые, то правильность кода отпадает на второй план и остается лишь вопрос совместимости со всеми браузерами.
Мне гораздо легче пожертвовать всей семантикой и стандартами, взамен более производительной работы и хорошей совместимости со всеми браузерами.
такая вёрстка тоже благоприятствует производительно работе, серверным и клиентским программистам, вероятно, гораздо легче работать именно с простым легкочитаемым кодом
да, это так. Но всё равно, когда порой безуспешно борешься с IE или другим браузером, то здравый смысл всё таки проступает и приходится делать «чтобы работало» :) Хотя и минусы свои в этом есть.
Я для себя так решил: пока браузеры не станут по-человечески поддерживать стандарты (возможно когда выйдет XHTML 2), то и мне нет смысла полностью писать стандартизированный код. Если возможно, то, конечно я напишу просто и чтобы соответствовало всем правилам.
Просто стоит признаться, что пользователю сайта глубоко плевать как он написан, ему лишь бы видеть правильно сформированную страницу.
Я для себя так решил: пока браузеры не станут по-человечески поддерживать стандарты (возможно когда выйдет XHTML 2), то и мне нет смысла полностью писать стандартизированный код. Если возможно, то, конечно я напишу просто и чтобы соответствовало всем правилам.
Просто стоит признаться, что пользователю сайта глубоко плевать как он написан, ему лишь бы видеть правильно сформированную страницу.
overflow:hidden — мне часто не подходит, ибо постоянно встречаюсь с блоками, выходящими за границу родителей.
часто использую width:100%; float: left
кстати, предлагаю дополнить статью свобной таблицей совместимости вариантов float-сброса с браузерами: www.ejeliot.com/samples/clearing/rule-support.html
:)
часто использую width:100%; float: left
кстати, предлагаю дополнить статью свобной таблицей совместимости вариантов float-сброса с браузерами: www.ejeliot.com/samples/clearing/rule-support.html
:)
НЛО прилетело и опубликовало эту надпись здесь
Methods for Containing Floats — хорошая подборка примеров.
Я стараюсь всегда пользоваться связкой overflow:hidden + zoom:1, в случаях, когда что-то нужно вытащить из контейнера, я делаю dot-clearing.
Насчёт терминологии — мне кажется, что прямой перевод «очистка» звучит крайне нелепо. Чаще всего в разговорах говорю прямо «клиаринг», а в письменной речи стараюсь привить термин «выключка» — у него конечно есть некоторая типографская история, связанная с выравниванием, но всё же мне кажется, что это удачный вариант. Выключаем действие float-контейнера, начинаем новый нормальный поток.
А иллюстрации и впрямь получились очень наглядные. Блок с цветом + его свойства — всё это легко запоминается.
Я стараюсь всегда пользоваться связкой overflow:hidden + zoom:1, в случаях, когда что-то нужно вытащить из контейнера, я делаю dot-clearing.
Насчёт терминологии — мне кажется, что прямой перевод «очистка» звучит крайне нелепо. Чаще всего в разговорах говорю прямо «клиаринг», а в письменной речи стараюсь привить термин «выключка» — у него конечно есть некоторая типографская история, связанная с выравниванием, но всё же мне кажется, что это удачный вариант. Выключаем действие float-контейнера, начинаем новый нормальный поток.
А иллюстрации и впрямь получились очень наглядные. Блок с цветом + его свойства — всё это легко запоминается.
спасибо. надо проверять, в блупринте почему то используется именно div с классом clear. неужели они не знают про метод проще
Спасибо большое за статью, всю верстательную жизнь пользовалась clear и это порождало описанные проблемы. Приходилось вставлять костыли.
Вот иллюстрация поговорке «Век живи – век учись». Разбирался с чужим кодом, и ваш совет с overflow помог обойти одну недоработку. Спасибо.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?