Pull to refresh

Comments 75

Не верстальщик, но иногда приходится править «кривые руки»… самому времени не было разобраться с семантикой, а тут — отличная министатейка )))
Со свойством overflow надо быть осторожным, если внутри элемента с overflow:hidden, будет ссылка-якорь на текущую страницу, то вместо прокрутки страницы к нужному месту, мы получим прокрутку внутри элемента с overflow:hidden
В опере при клике на ссылку ничего не происходит.
Чет я тоже не вкурил что меняется :(
UFO just landed and posted this here
UFO just landed and posted this here
Весьма занятно. Возьму на заметку.
overflow:hidden лучше стараться не использовать. Кажись ие6 не всегда положительно на него реагирует.
Да и в разных браузерах он будет выглядеть не совсем одинаково.
в разных браузерах он выглядит одинаково. в IE не работает совсем, но свойство hasLayout тоже создаёт контекст форматирования. нужно стараться его использовать
Думаю буду по прежнему использовать float-clear.
— IE6 вообще на это не реагирует
— Во всех браузерах будет одинаково, включая IE7+

Ваше высказывание звучит как «я что-то примерно знаю, но не уверен точно что, поэтому скажу что-нибудь такое»…
Хорошая подача, иллюстрации и текст…
Наглядно!
Да, иллюстрации на высоте. Обычно то же самое выглядит очень уродливо и непонятно.
UFO just landed and posted this here
зелёный и синефиолетовый находятся вне контейнера с overflow:hidden, но этот контейнер не влияет на них (рис. справа)
зато использование clear заставляет помещать зелёный блок ниже любого контейнера с float (слева)
UFO just landed and posted this here
UFO just landed and posted this here
в следующей статье я расскажу как пользоваться чудесной возможностью overflow без использования этого свойства (а значит не боятся, что контент будет обрезан)

кстати в том способе «height: 0» создаёт hasLayout, поэтому способ работает в IE, однако способ будет давать разные результаты (см. последнюю картинку) в IE и остальных браузерах
С удовольствием прочту продолжение. У Вас подача материала хорошая.
UFO just landed and posted this here
Был прав, но ошибся с тем как они включают hasLayout: прочитайте то, что по заголовком «But what about IE?». IE не поддерживает :after, поэтому всё только через hasLayout— можно задать height, можно как у них zoom:1.
UFO just landed and posted this here
UFO just landed and posted this here
в ff2 замечательно работает -moz-inline-stack

но инлайн блоки ничем не лучше флоатов…
UFO just landed and posted this here
https://developer.mozilla.org/En/Mozilla_CSS_Extensions

тем, что используются не по назначению ;-)
UFO just landed and posted this here
потому, что они предназначены для вставки блоков в текст, а не для создания «раскладок».
UFO just landed and posted this here
Ни -moz-inline-stack, ни -moz-inline-box не прокатывают, если вдобавок, необходимо внутри элемента спозиционировать абсолютно другой элемент (в смысле absolute внутри relative).
Еще у меня картинка пропала внутри блока в FF2, если у нее float: left. И в обоих фаерфоксах перестает работать clear:both внитри блоков и они могут быть меньше чем эта картинка с флоатом.
Хотя, нет. clear:both заработал когда я поставил inline-block после -moz-inline-stack, но до //display: inline; zoom: 1; для противного эксплорера :)
-moz-inline-stack? Почему-то ни гугл, ни яху о нем не слыхивали…
Руку на отсечение отдаю, что вы искали с приставкой "-", и конечно же ничего не нашли. :)
UFO just landed and posted this here
UFO just landed and posted this here
Не замечательно вы по вкладывайте в такие «инлайновые блоки» текст, а еще лучше картинки и F5 понажимайте, ох какие, как правильно выразился господин SelenIT, «непредсказуемые фокусы» вы увидете — смотреть страшно, и никак не исправить, что самое плохое. Текст «сбивается в кучу», с картинками еще хуже, при чем не всегда, и очень не приятно бывает «дебажить»

Единственное что более или менее помогало, либо display: table-cell;, либо display: inline; float: left; + еще что-то для одинакового отображения с остальными браузерами, естественно это подключалось через хаки только для FF2, но это соответственно только если от блоков не требуется быть position: relative; или других «исключительно блочных» свойств.

Но вот что всегда приятно удивляло — правильная работа инлайновых блоков в IE6 )
стэк — это всё-таки не блок ;-)
https://developer.mozilla.org/en/XUL_Tutorial/Stack_Positioning
заверни внутренности в какой-нибудь спан и они перестанут наслаиваться.
Спасибо — попробую ;)
Инфы об этом мало очень, а про хорошее кроссбраузерное решение вообще только недавно начали описывать, так что приходиться пользоваться, «а вроде» или «а я где то слышал» )
ну, это совсем не панацея. все блочные элементы в стэке, позиционируются относительно левого верхнего угла, что во многих случаях не катит.
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
вообще, вкладывать попапы в сами элементы — дурная практика. например, если у дяди з-индекс больше, чем у родителя, то дядя будет сверху «попапа».
Побольше бы таких полезных заметок. Спасибо.
А упомянутый вами тег br семантичен? По моему, нет.
думаю, семантичней чем пустой див)
а что вы сами скажите о <div class="clear"></div>?
Я скажу, что это удобная конструкция =)
UFO just landed and posted this here
в чём проблема?

.clear {
clear:both;
position:relative;
font-size:0px;
height:0px;
line-height:0px
}

UFO just landed and posted this here
Ну хорошо, напишите css класс на все случаи жизни и пользуйтесь на здоровье =)
Опять же не вижу проблемы
BR — это перевод строки, т.е. элемент визуального форматирования, т.е. что-то
DIV — это пустой элемент, т.е. ничто

Соотв. DIV выглядит более уместно, если речь идёт про семантику. И уж тем более класс clear выглядит умнее атрибута clear.
UFO just landed and posted this here
Я говорю прежде всего не про DOM, а про семантику элементов.
H1 — заголовок, A — ссылка, BR — перевод строки, DIV — стерильный контейнер блочного типа.

Ну а Tidy и W3C Validator — это две разные вещи.

Да и вообще неясно о чём спор — я такие штуки не использую, вы, как я понимаю, тоже… )
UFO just landed and posted this here
Мне лично больше нравится див, почему-то. Хотя он тут не намного семантичнее(

Вот хочется чтобы код был аккуратненьким, без всего лишнего, а на практике всегда всякие левые дивы получаются, и т.д.((
А вообще, по поводу стопроцентной семантики кода, использования блочной верстки, соответствию стандартов, считаю, что всегда нужно руководствоваться здравым смыслом и в первую очередь беспокоиться не о валидности кода, а о соотношении цена/качество.

Конечно, никто не запрещается для саморазвития писать «сверхправильный» код, но когда несовершенство браузеров, которые до сих пор довольно кривые, то правильность кода отпадает на второй план и остается лишь вопрос совместимости со всеми браузерами.

Мне гораздо легче пожертвовать всей семантикой и стандартами, взамен более производительной работы и хорошей совместимости со всеми браузерами.
такая вёрстка тоже благоприятствует производительно работе, серверным и клиентским программистам, вероятно, гораздо легче работать именно с простым легкочитаемым кодом
да, это так. Но всё равно, когда порой безуспешно борешься с IE или другим браузером, то здравый смысл всё таки проступает и приходится делать «чтобы работало» :) Хотя и минусы свои в этом есть.

Я для себя так решил: пока браузеры не станут по-человечески поддерживать стандарты (возможно когда выйдет XHTML 2), то и мне нет смысла полностью писать стандартизированный код. Если возможно, то, конечно я напишу просто и чтобы соответствовало всем правилам.

Просто стоит признаться, что пользователю сайта глубоко плевать как он написан, ему лишь бы видеть правильно сформированную страницу.
overflow:hidden — мне часто не подходит, ибо постоянно встречаюсь с блоками, выходящими за границу родителей.
часто использую width:100%; float: left

кстати, предлагаю дополнить статью свобной таблицей совместимости вариантов float-сброса с браузерами: www.ejeliot.com/samples/clearing/rule-support.html
:)
половина таблицы состоит из способов включения hasLayout (включая inline-block) :). будет ещё одна статья — продолжение)
UFO just landed and posted this here
UFO just landed and posted this here
ого! а в чём там было дело? расскажите-покажите!)
UFO just landed and posted this here
Methods for Containing Floats — хорошая подборка примеров.

Я стараюсь всегда пользоваться связкой overflow:hidden + zoom:1, в случаях, когда что-то нужно вытащить из контейнера, я делаю dot-clearing.

Насчёт терминологии — мне кажется, что прямой перевод «очистка» звучит крайне нелепо. Чаще всего в разговорах говорю прямо «клиаринг», а в письменной речи стараюсь привить термин «выключка» — у него конечно есть некоторая типографская история, связанная с выравниванием, но всё же мне кажется, что это удачный вариант. Выключаем действие float-контейнера, начинаем новый нормальный поток.

А иллюстрации и впрямь получились очень наглядные. Блок с цветом + его свойства — всё это легко запоминается.
UFO just landed and posted this here
спасибо. надо проверять, в блупринте почему то используется именно div с классом clear. неужели они не знают про метод проще
Спасибо большое за статью, всю верстательную жизнь пользовалась clear и это порождало описанные проблемы. Приходилось вставлять костыли.
Вот иллюстрация поговорке «Век живи – век учись». Разбирался с чужим кодом, и ваш совет с overflow помог обойти одну недоработку. Спасибо.
Sign up to leave a comment.

Articles