Блог Это не баг, это фича!

Это не баг, это фича!Вспомните, как часто мы, верстальщики, расстраиваемся, когда браузеры ведут себя не так, как нужно, ругаем разработчиков, злимся на них. Но от безвыходности приходится мириться с таким поведением браузеров и искать обходные пути. Казалось бы, что если бы все работало по правилам, по стандартам, то жить стало бы легче. Да, я с этим полностью согласен.

Но как ни странно, иногда эти самые неприятные баги могут приятно удивить верстальщиков, заставить их подскочить с кресла и воскликнуть: «Это не баг, это фича!»

Не все баги одинаково бесполезны

Давайте вспомним те багофичи браузеров, которые могут быть в некоторых ситуациях полезны при верстке. Думаю, ни у кого не возникнет сомнения, что лидер в этой номинации — старичок IE6. Ну хоть в чем то он преуспел ;)

1. Position:fixed в ie6

Если блоку назначить свойство overflow со значением auto или scroll, а его дочернему элементу прописать position:relative, то дочерний элемент будет оставаться на месте при прокрутке родителя. А так как IE6 не поддерживает значение fixed, то этот баг можно считать отличной фичей. Есть много ситуаций, где он может быть полезен. Например, когда нужно фиксировать шапку сайта вверху страницы.

Бонус четвертого задания «Верстальщика-виртуоза», к сожалению, так и не был никем решен, а разгадкой для его решения была эта багофича.

2. !important в ie6

В примере про футер я рассказывал про то, что IE6 живет по закону «кто последний тот и папа», а на свойство !important он забивает.

height:auto !important; height:100%;

Такой код он поймет по своему и установит высоту в 100%, а все другие браузеры это значение проигнорируют. Существует масса других хаков для «ослика». Но этот способ хорош тем, что он валидный. Думаю, его так же можно считать фичей.

3. Min-height в ie6

Как известно, ie6 не поддерживает min-height. Это свойство незаменимо, когда необходимо выполнение следующих условий:

  • высота блока должна определяться высотой контента
  • если контента мало, высота блока должна фиксироваться

Но, к счастью, у шестерки есть проблемы со свойством height, когда контент, который не вмещается в блок с заданной высотой, не выходит за границы блока, а растягивает этот блок. Поэтому можно спокойно писать height вместо min-height, и это свойство будет определять минимальную высоту в ie6. Это же правило работает в ie6 и для свойства min-width

4. Margin:auto в ie6

В ie6 нельзя выровнять блок по центру, прописав к нему margin:auto. Но, к счастью, у него есть полезная багофича со свойством text-align — это свойство работает не только для текста, но и для блоков внутри контейнера, которому задается свойство. Таким образом, задав для контейнера text-align: center, мы сможем выровнять внутренние блоки по центру контейнера.

Предлагаю обсудить другие баги браузеров, которые иногда бывают полезными для верстальщиков.

Поделиться ссылкой на статью:

Предыдущая статья
Следующая статья

Комментарии

Алексей Валеев 22 ноября 2010 года, 12:40 #

margin:auto работает в ие6, когда документ с доктайпом strict

webmolot 22 ноября 2010 года, 12:56 #

Алексей, всё верно, спасибо за уточнение. Выравнивание по середине через margin:auto не поддерживается Internet Explorer 6 в режиме совместимости (quirk mode).

Zigzag 22 ноября 2010 года, 13:19 #

А с каких пор IE6 перестал центрировать блок при margin: o auto:?

Zigzag 22 ноября 2010 года, 13:20 #

Меня опередили. А кто еще в квирксе верстает-то? С какой целью?

webmolot 22 ноября 2010 года, 13:22 #

Цели у всех разные, а результат один :). Возможно это решение окажется кому-то полезным.

Перспективный блоггер 22 ноября 2010 года, 18:18 #

Да, тоже удивило, что нет примечания, что это только в quirk mode. Но общественность в принципе уже все уточнила :) .

SelenIT 23 ноября 2010 года, 13:57 #

Да, с position:relative, конечно, мощно… столько упоминаний, как с этим бороться, и практически ни одного, что это можно использовать (лично я не видел), все пользовались либо экспрешнами + фиксацией фона, либо конкурсным вариантом с absolute… С трудом верится, что всё так просто. Неужели нет никаких подводных камней типа сдвигов из-за паддингов предка?

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

webmolot 23 ноября 2010 года, 14:10 #

SelenIT, насчет подводных камней пока не знаю, нужно более детально проработать этот способ. Что-то мне подсказывает, что они будут, но это не значит, что их нельзя будет побороть. В любом случае, уже сейчас видно, что этот способ вполне пригоден для решения задачи, которую мы рассматривали в конкурсе.

А что с hasLayout? Как его можно применить с пользой? Баг назвали, а фичу нет :)

Shustry 14 декабря 2010 года, 12:10 #

Про первый багофитч не врубился чёт. Третий и четвёртый юзаю регулярно. А второй, имхо, проще решить через подключение отдельного ксс для ИЕ67 через условные комменты или пхп функцию.

webmolot 15 декабря 2010 года, 14:09 #

Shustry , посмотрите пример в ie6. Можно заметить, что блоки по сторонам ведут себя, как будто для них прописали position:fixed. Но так как ie6 не понимает это значение, значит действует какая-то потусторонняя сила. Но могу Вас уверить, что никакой магии в этом нет, просто мы с пользой применили баг ie6, который я и назвал багофичей.
По поводу условных комментариев, согласен, сам так делаю. Но бывают случаи, когда удобнее воспользоваться этим хаком.

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com