我最近获得了……机会……完全重新设计我支持的网站的布局。为了保持我的 CSS 简单和 HTML 语义，我决定使用 the "holy grail" layout 的修改版本。 (主要区别在于将右列移到中间列内，这进一步简化了事情，并使中间列固定宽度)。
经过微不足道的调整后，我在 FF3、Chrome 和 Opera 中使用了新布局，这意味着是时候启动 IE6 了。不出所料，布局中断(左栏完全丢失)。然而，我没想到它会如此惊人地崩溃——我似乎在 IE6 中触发了某种渲染错误，我既无法隔离也无法消除。
在调整 chalice 布局时，我最初省略了它使用的 IE6 特定 hack，因为我对右栏所做的修改不需要(不应该？)，因为它说明对于该列的宽度，它不会出现在我的布局中的同一级别。尽管如此，我的第一个猜测仍然是将它重新添加进去，但事实证明它需要一个非常奇怪的数字(246px，它没有出现在样式表的其他任何地方)，所以我尝试调整窗口大小以确保它不相关到页面大小。令我惊讶的是，然后该列向右跳动了约 1000 像素，远远超出了页面的边缘。
返回并删除 IE6 hack，调整大小时会发生相同的行为，只是它不是从布局的左侧跳出页面，而是突然出现在右侧-布局的手边。我对布局的每一部分都进行了研究，这些部分似乎甚至是远程相关的，并用谷歌搜索了我所知道的所有 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>
最佳答案
关于html - 我的 HTML 专栏在哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/580137/