代码之家 › 专栏 › 技术社区 › Ben Blank Jarret Hardie

我的HTML专栏在哪里?

internet-explorer-6 css html

Ben Blank Jarret Hardie · 技术社区 · 16 年前

我最近被授予了机会 _完全重新设计我支持的网站布局。为了保持我的CSS简单和HTML语义,我决定使用 the "holy grail" layout (主要的区别是将右列移到中心列内,这进一步简化了操作,并使中心列固定宽度)。

经过一番微不足道的改动,我有了新的布局在FF3、Chrome和Opera中工作,这意味着是时候启动IE6了。可以预见,布局将中断(左列完全丢失)。但是,我没想到它会如此惊人地崩溃,我似乎在IE6中触发了某种呈现错误,既不能隔离也不能消除。

在修改圣杯的布局时,我最初忽略了它使用的IE6特定的黑客程序,但事实并非如此(不应该如此?)我对右栏所做的修改是必需的,因为它占了该栏的宽度,而这在我的布局中不显示在同一级别。不过,我的第一个猜测是把它重新添加进去,但结果却是需要一个非常奇怪的数字(246px,样式表中的其他地方都没有),所以我试着调整窗口的大小,以确保它与页面大小无关。令我惊讶的是, 然后该列向右跳跃约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">&copy;2009 Blah blah blah</p>
        </div>

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

3 回复 | 直到 6 年前

vladr 16 年前

指定 position: relative 对于 #top 在IE6中修复它,信不信由你。

见 this , these 等。

-1

hasen j 7 年前

这就是为什么 I say 桌子不是邪恶的!只要你不以黑客的方式使用它们(就像人们在2000年以前那样),它们就是完美的布局。

提出了什么不那么刻薄的替代方案?
一个需要奇怪黑客的结构 根本没道理!!

被接受的答案的评论“信不信由你”就说了这一切!

*我把它变成了一个wiki,害怕被CSS狂热者起诉

也请查看此答案:

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

并且…

Give up and use tables!

-2

Arlen Beiler 15 年前

使用表格,下面是一个示例:

<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>

这很有效,我测试过。