Недавно мне была предоставлена возможность ... ... полностью изменить дизайн веб-сайта, который я поддерживаю. Чтобы сохранить простоту моего CSS и семантику HTML, я решил использовать модифицированную версию макета «Святой Грааль» (основное отличие заключается в перемещении правого столбца внутри центрального столбца, что упрощает работу еще дальше и делая центральную колонку фиксированной ширины).
После незначительного переворота у меня был новый макет, работающий в FF3, Chrome и Opera, что означало, что пришло время запустить IE6. Как и ожидалось, макет ломается (левый столбец полностью отсутствует). Тем не менее, я не ожидал, что он сломается так впечатляюще - кажется, я вызвал какую-то ошибку рендеринга в IE6, которую я не могу ни изолировать, ни устранить.
При адаптации макета Святого Грааля я изначально пропустил специфический для IE6 хак, который он использует, но он не нужен (не должен быть?) С изменениями, внесенными в правый столбец, поскольку он учитывает для ширины этого столбца, который не отображается на том же уровне в моем макете. Тем не менее, добавление его обратно было моей первой догадкой, но оказалось, что требуется очень странное число (246 пикселей, которого больше нет в таблице стилей), поэтому я попытался изменить размер окна, чтобы убедиться, что оно не связано на размер страницы. К моему большому удивлению, столбец затем прыгнул на ~ 1000 пикселей вправо , намного дальше края страницы.
Возвращаясь и удаляя взлом IE6, то же самое происходит при изменении размера, только вместо того, чтобы прыгать с левой стороны макета за пределы страницы, оно появляется из ниоткуда в справа стороны макета. Я разбирался со всеми частями макета, которые кажутся даже отдаленно связанными, и погуглил все известные мне ошибки рендеринга IE6, но, похоже, не могу устранить поведение при переходе по размеру страницы.
Кто-нибудь видел эту ошибку раньше, если она есть? Полный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Modified grail layout</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
#main {
background: white;
overflow: auto;
padding-left: 180px;
}
#content {
background: #dfd;
float: left;
padding: 10px 10px 0;
width: 800px;
}
#left {
background: #ccc;
float: left;
margin-left: -100%;
position: relative;
padding: 10px 10px 0;
right: 180px;
width: 160px;
}
#right {
background: #fdd;
float: right;
margin-bottom: 10px;
padding: 10px 10px 0;
width: 160px;
}
#top {
margin: 0 auto;
width: 1000px;
}
body {
background: #ddf;
}
/* fake content */
#cc1 {
height: 320px;
width: 800px;
}
#cc2 {
height: 320px;
margin-right: 190px;
}
#cc3 {
height: 160px;
margin-right: 190px;
}
#lc1 {
height: 120px;
margin-left: auto;
margin-right: auto;
width: 144px;
}
#lc2 {
height: 300px;
width: 160px;
}
#lc3 {
height: 400px;
width: 160px;
}
#rc1 {
height: 400px;
width: 160px;
}
#rc2 {
height: 300px;
width: 160px;
}
div.fake-content {
background: #666;
color: white;
margin-bottom: 10px;
}
/* Internet Explorer (all) */
#ie body {
text-align: center;
}
#ie #left {
text-align: center;
}
#ie #left * {
text-align: left;
}
#ie #right {
margin-bottom: 0;
}
#ie #top {
text-align: left;
}
/* Internet Explorer 6 */
#ie6 #left {
left: 246px; /* WTF!? */
}
</style>
</head>
<body>
<!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
<!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
<!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->
<div id="top">
<div id="main">
<div id="content">
<div id="cc1" class="fake-content">cc1</div>
<div id="right">
<div id="rc1" class="fake-content">rc1</div>
<div id="rc2" class="fake-content">rc2</div>
</div>
<div id="cc2" class="fake-content">cc2</div>
<div id="cc3" class="fake-content">cc3</div>
</div>
<div id="left">
<div id="lc1" class="fake-content">lc1</div>
<div id="lc2" class="fake-content">lc2</div>
<div id="lc3" class="fake-content">lc3</div>
</div>
</div>
<p id="footer">©2009 Blah blah blah</p>
</div>
<!--[if IE]></div></div><![endif]-->
</body>
</html>