18июля,
2010
В общем, терпение, конечно, у меня объёмистое очень, до последнего, а потом прорывает.
За сим, наконец-то решился отказаться от поддержки IE6. Я там уже просто наизусть знаю тонну багов и всегда стараюсь верстать, чтоб они не вылезли при тестировании макетов, но всякие разные интересные штуки, которые спокойно делаются в ие7-8 итд итп, а в ие6 не работают — да и хуй с ним, с этим IE6. Достал.
Буду требовать денег за поддержку динозавра позапрошлой эпохи интернета.
Заноза в заднице, больной зуб разработчика. Ещё надо какое-нибудь всплывающее окошко вешать на сайты с издевательскими текстами.
1февраля,
2009
Решил подсобрать самые распространённые баги, выдаваемые 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
Я продолбался битых 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
В принципе, достаточно много об этом написано, найдено решение давно.
В CSS для блока, который не имеет фиксированной высоты и в нём находятся элементы с float, прописывается:
overflow: hidden;
Это свойство по какой-то причине заставляет блок растягиваться на высоту элементов содержащихся внутри. Однако, это свойство работает в IE6, если блоку указана ширина. Если таковой не имеется, то в этом несчастном браузере не происходит никаких положительных изменений. Можно указать блоку, конечно ширину, либо в процентах, либо жёстко фиксированную. Однако, если у блока есть margin или padding, а надо, чтобы блок был во всю ширину страницы, то результат не заставит себя ждать — блок уползёт за границы экрана и появится горизонтальный скролл.
Но решение всё же есть — свойство блока display. То, которое не понимает Mozilla Firefox (Mozilla Firefox 3 уже понимает), но понимает IE6 — display: inline-block;
Это свойство заставляет в IE6 блок растягивать на нужную ширину и высоту.
Чтобы избежать лишних ошибок в других браузерах, подобные детали стоит вынести в отдельный цсс, и при помощи conditional comments подключить это свойство.
P.S. Иногда всё-таки оно не срабатывает(что бывает крайне редко) и блок схлопывается, после обычной перезагрузки страницы, всё встаёт на свои места.
