Question

我有一个非常简单的页面，在IE6中无法正常显示。在此浏览器中，左侧导航按下内容区域中的表格。任何人都可以帮助我让桌子保持在容器顶部的位置，而不是被左侧div中的内容推倒？

以下是该页面的html代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style type="text/css" media="screen">
            body

            #nav
            {
                float: left;
                width: 180px;
                background-color: #999;
            }

            #content
            {
                margin-left: 210px;
                background-color: #999;
            }

        </style>
    </head>
    <body>

        <div id="nav">
            <div>left content</div>
        </div>
        <div id="content">
            <table style="width: 100%; background-color: #666666">
            <tr><td>table</td>
            </tr>
            </table>
        </div>
    </body>
</html>

这是一个网址，所以你可以看到它的样子：

http://www.morganpackard.com/cssTest.html

Answer 1

改为让你的桌子宽度为99％。

Answer 2

另一个解决方案是让表格向左浮动并且宽度为100％....

Answer 3

你也可以让内容浮动：

 #content
 {
     float:left;
     ...
 }

不要忘记调整边距 - 但是

其他解决方案虽然不适用于其他浏览器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                                float: left;
                                width: 180px;
                                background-color: #999;
                        }

                        #content
                        {
                                float: right;
                        }

                </style>
        </head>
        <body>
            <div id="container">
                <div id="nav">
                        <div>left content</div>
                </div>
                <div id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table>
                </div>
            </div>
        </body>
</html>

注意容器和浮动：右;

Answer 4

如果所有其他方法都失败了，请使用CSS纯粹主义者的表布局* ducks和cover *：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <style type="text/css" media="screen">

                        #nav
                        {
                            width: 180px;
                            background-color: #999;
                        }

                        #content
                        {
                            background-color: #999;
                        }

                </style>
        </head>
        <body>
            <table style="width:100%;">
                <tr>
                    <td id="nav">
                        <div>left content</div></td>

                    <td id="content">
                        <table style="width: 100%; background-color: #666666">
                        <tr><td>table</td>
                        </tr>
                        </table></td>
                </tr>
            </table>
        </body>
</html>

两列CSS布局问题 - 在IE6中，内容区域中的表被左侧导航按下

4 个答案: