18июля,
2010
Ну и я ступил на скользкий путь

В общем, терпение, конечно, у меня объёмистое очень, до последнего, а потом прорывает.

За сим, наконец-то решился отказаться от поддержки IE6. Я там уже просто наизусть знаю тонну багов и всегда стараюсь верстать, чтоб они не вылезли при тестировании макетов, но всякие разные интересные штуки, которые спокойно делаются в ие7-8 итд итп, а в ие6 не работают — да и хуй с ним, с этим IE6. Достал.

Буду требовать денег за поддержку динозавра позапрошлой эпохи интернета.

Заноза в заднице, больной зуб разработчика.  Ещё надо какое-нибудь всплывающее окошко вешать на сайты с издевательскими текстами.

1февраля,
2009
Самые-самые баги IE6

Решил подсобрать самые распространённые баги, выдаваемые Internet explorer-ом 6, с которыми сталкиваешься в процессе вёрстки. Если знать заранее, где они могут вылезти, то можно и верстать так, чтобы не пришлось потом судорожно выискивать ошибку.

Большинство стилей для IE6, которые отличаются, лучше прописывать в отдельный css-файл через conditional comments в html-файл между тегов <head></head>, например, так:

<!--[if lte IE 6]> <style type="text/css" media="all">@import url ('/css/ie.css');</style> <![endif]-->

Где, if — команда «если», lte — ниже и эта версия включительно, IE 6, соответственно, название версии браузера.

А теперь сами ошибки:

Удваивающийся margin
— Либо вручную прописывать половину от margin-a, либо пользоваться padding-ами внешних блоков, избегая появления таких ошибок.

Схлопывающийся блок, если внутри него есть элементы с float
— Обычно это устраняется добавлением внешнему блоку overflow: hidden. В IE6 это не сработает, если не указана ширина. Соответственно:
1. Указать ширину.
2. Прописать display:inline-block; — использовать в тех случаях, когда жёстко задать ширину нет возможности.

Трёхпиксельные отступы у «плавающего» блока
— Прописать блоку отрицательные отступы — margin: 0 -3px;

Ненужные отступы у картинок
— Либо задать <img> float, либо display: block;

Минимальная и максимальная ширина
— Используется специальный хак, потому что других способов реализации нет:
Max-width:
width:expression (document.body.clientWidth > 400? «400px»: «auto» );

Min-width:
width:expression ((document.documentElement.clientWidth || document.body.clientWidth) < 1000? «1000px»: «auto»);

Минимальная и максимальная высота
Min-height:
height:expression (this.scrollHeight < 200? «200px» : «auto»);

Max-height:
height:expression (this.scrollHeight > 200? «200px» : «auto»);

Если пишете эти свойства в общий css, то обязательно ставьте в конце класса, иначе другие свойства внутри этого класса могут вообще не работать.

Отступы в пустых блоках
— Это резервированное место равное высоте и ширине одной буквы, размер которой задан главным.
1. Обнуляется font-size: 0;
2. Либо, если внутри блоки с нежелательными отступами (IE6 берёт отступ из CSS и добавляет резервированный), в html-файле расположить их один за другим, не оставляя между ними пробелов и переносов строки.

Нижний margin не срабатывает
— По-возможности использовать padding, либо верхний margin (верхний всегда срабатывает). Если ни то, ни другое невозможно в данный момент, то border-bottom под цвет фона или clear:both;.

Обнулить резервированные отступы у рамок ячеек таблиц
— border:0, как оказалось недостаточно. Свойство border-collapse: collapse — обнуляет полностью резервируемые отступы.

Дублирование последнего блока, если подряд идёт много элементов с float
— Такое встречается, если задана жёсткая ширина контейнера, в котором элементы с float. в этом случае дублированный блок перескакивает на следующую строку. Его можно спрятать через overflow: hidden за границей контейнера.

Данные решения соответствуют современным стандартам, как css, так и html. За исключением хаков: min-height, min-width, max-height, max-width.

P.S. возможно, список пополню, если всплывёт ещё что-то.

6января,
2009
Два фона, height: 100% и больше

Я продолбался битых 4 часа, пытаясь выяснить, что делать с двумя блоками, которые должны минимально занимать 100% высоты экрана, а также растягиваться свыше 100%, если контента больше. В общем, новые сутки я встретил в компании кучи запущенных браузеров, непослушных блоков, чашки кофе, от крепости которого глаза лезут на лоб и нежелания спать, пока проблема всё же не будет решена.

Как обычно, всё началось с того, что вылез баг в ие6. С данной проблемой я уже сталкивался, когда верстал макет Ecoorganic. Там проблема решалась проще, потому что блоку с фоном, лежащим под всем контентом, а также выступающим снизу, если текста на странице мало, можно было задать минимальную высоту в фиксированном значении. В этом же случае, мне надо было полностью не зависеть от содержимого и размера окна.
Сделав стандартный набор в css для html и body:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

я также прописал для html и body этакий «быстрый хак» — _height:100%;. Утверждают, что IE6 неправильно обрабатывает высоту, потому подобная запись на него действует, как свойство min-height для новых и нормальных браузеров. Однако, нет. Работает оно вообще не так, и точно не так, как хотелось бы.
Второй фон, который должен был занимать ширину и высоту поверх первого на 100%, я положил в div с классом:

<span>.layout {
text-align: left;
background: url(images/bck_ill.gif) center center;
width: 100%;
height: 100%;
min-height: 100%;
_height:100%;
}</span>

Вроде как во всех браузерах нормальное отображение, кроме Firefox 2, как ни странно. Внутри div-а с классом .layout находились блоки с float, что дало обычный в этих случаях результат — div сложился и контент вывалился из блока, образовав огромную дыру в пару экранов под футером сайта.
Естественно, что используют в этих случаях, я использовал для блока overflow: hidden;. Overflow отсёк лишнее, и блок занял нормальную высоту 100%, а также стал растягиваться по высоте контента за 100% высоты. Но в IE6 это выглядело совсем иначе: overflow:hidden; срезал всё, что ушло за высоту 100%, скроллбар стал неактивен. В общем, превышать содержимое страницы больше, чем один экран, стало невозможно.
Вот за решением этой проблемы и поиском, а также ползуясь методом тыка, я провёл ещё пару часов.
Ответ нашёлся весьма спонтанно. Убрав свойства min-height:100% у html и body и добавив .layout-у свойство display: table. Избавился везде от «быстрого хака» — _height:100%;.
Обработка свойств, назначенных html и body не требует указания минимальной величины, чтобы блок продолжал тянуться, он занимает всё пространство, которое занимает контент.
У блочного элемента с классом .layout указанное свойство min-height:100% для нормальных браузеров заставляет его растягиваться на 100%, а свойство display:table;, соответственно, заставляет блочный элемент вести себя, как табличный, что корректно работает и в IE6, и в остальных браузерах.

Окончательный код CSS:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

body {
 background: #FDF6DE url(images/bck.gif);
}
.layout {
 background: url(images/bck_ill.gif) center center;
 width: 100%;
 height: 100%;
 min-height: 100%;
 display: table;
}

Окончательный код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Some site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="inside.css" type="text/css">
</head>
<body>
<div class="layout">
Content
</div>
</body>
</html>

Этот вариант вёрстки был проверен в браузерах: Firefox 2, Firefox 3, Google Chrome, Safari for Windows, Safari for Mac, Opera 9.24, IE7, IE6 — везде отображается корректно.
HTML и CSS успешно прошли валидацию.

23ноября,
2008
Схлопывающийся div

В принципе, достаточно много об этом написано, найдено решение давно.
В CSS для блока, который не имеет фиксированной высоты и в нём находятся элементы с float, прописывается:

overflow: hidden;

Это свойство по какой-то причине заставляет блок растягиваться на высоту элементов содержащихся внутри. Однако, это свойство работает в IE6, если блоку указана ширина. Если таковой не имеется, то в этом несчастном браузере не происходит никаких положительных изменений. Можно указать блоку, конечно ширину, либо в процентах, либо жёстко фиксированную. Однако, если у блока есть margin или padding, а надо, чтобы блок был во всю ширину страницы, то результат не заставит себя ждать — блок уползёт за границы экрана и появится горизонтальный скролл.
Но решение всё же есть — свойство блока display. То, которое не понимает Mozilla Firefox (Mozilla Firefox 3 уже понимает), но понимает IE6 — display: inline-block;
Это свойство заставляет в IE6 блок растягивать на нужную ширину и высоту.
Чтобы избежать лишних ошибок в других браузерах, подобные детали стоит вынести в отдельный цсс, и при помощи conditional comments подключить это свойство.

P.S. Иногда всё-таки оно не срабатывает(что бывает крайне редко) и блок схлопывается, после обычной перезагрузки страницы, всё встаёт на свои места.