Question

我最近获得了...... 机会 ...来完全重新设计我支持的网站的布局。为了保持我的CSS简单和我的HTML语义，我决定使用the "holy grail" layout的修改版本（主要区别在于移动中间列内的右列，这进一步简化了事情，并使中心成为中心列固定宽度）。

在可忽略不计的数量之后，我在FF3，Chrome和Opera中使用了新的布局，这意味着是时候启动IE6了。可以预见，布局中断（左栏完全丢失）。但是，我没想到它会如此惊人地突破 - 我似乎在IE6中引发了某种渲染错误，我既不能隔离也不能消除它。

在调整圣杯布局时，我最初省略了它使用的IE6特定的黑客，因为它不是（不应该？）我对右栏进行的修改所需要的，因为它的帐户对于该列的宽度，它在我的布局中不会出现在同一级别。仍然，重新添加它是我的第一个猜测，但它结果需要一个非常奇怪的数字（246px，它没有出现在样式表中的任何其他地方），所以我尝试调整窗口大小以确保它不相关到页面大小。令我惊讶的是，该列然后向右跳跃了大约1000个像素，远远超出了页面的边缘。

回过头来删除IE6 hack，调整大小时会出现同样的行为，而不是从页面布局的左侧跳跃，它在右侧无处不在>布局的一面。我已经看到布局的每个部分，这看起来甚至是远程相关的，并且搜索了我所知道的所有IE6渲染错误，但似乎无法消除跳转页面调整大小的行为。

之前有没有人见过这个bug，如果有错误的话？完整的代码如下：

<!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">&copy;2009 Blah blah blah</p>
        </div>

        <!--[if IE]></div></div><![endif]-->
    </body>
</html>

Answer 1

为position: relative指定#top会在IE6中修复它，信不信由你。

请参阅this，these等

Answer 2

这就是为什么I say表不是邪恶的！只要你不以黑客方式使用它们（就像2000年曾经做过的那样），它们就非常适合布局。

提出的不那么强硬的替代方案是什么？一个需要奇怪黑客的结构甚至没有意义!!

接受的答案的评论“信不信由你说”！

*我正在制作这个wiki，因为害怕被css狂热者起诉

也可以看看这个答案：

Vertical centering with css（我喜欢他的评论:)）

和..

Give up and use tables!

Answer 3

使用表格，以下是您的示例：

<html>
<head>
<title>3 column table</title>
</head>
<body>

<table style="width:100%;">
<tr>
<td style="width:20px;border: solid 1px black;">Left column</td>
<td style="border: solid 1px black;">Center Column</td>
<td style="width:20px;border: solid 1px black;">Right column</td>
</tr>
</table>

</body>
</html>

这是有效的，我测试了它。

我的HTML专栏在哪里？

3 个答案: