Question

我有一个左侧菜单DIV的布局。它以固定的EM宽度向左浮动。然后我有一个内容DIV，其左边距大于菜单的宽度。所以它恰好位于菜单的右侧，填充了剩余的空间，菜单和内容都完美排列。

但是，在Internet Explorer 6中，如果内容过宽，则会落在菜单下方。这意味着你有大量的空白，如果不滚动就无法真正看到任何内容。

不幸的是，我无法对内容进行更改 - 这是对托管第三方内容的网站的重新设计，并且更改该内容超出了我的范围。

此外，页脚栏必须位于菜单和内容的下方。

我设法通过使用绝对定位为IE6提供不同的布局来实现它的工作 - 不幸的是，页脚看起来很垃圾，而IE6是我们网站上使用次数最多的第二浏览器，我真的不能用它。

我也试过搞乱溢出但最终导致出现在整个地方的随机滚动条的问题也没有任何好处。

有没有人知道是否有一种简单的非Javascript方式可以在IE6以及“正确”的浏览器中使用？我目前认为它必须是基于表格的布局。

以下是问题的一个示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <style type="text/css">
            .menu {
                width: 14em;
                float: left;
            }

            .content {
                margin-left: 15em;
                zoom: 1;
            }

            .footer {
                clear: both;
            }

             /* styling to make the demo more obvious */
            .menu {
                background-color: #f99;
            }
            .content {
                background-color: #9f9;
            }
            .footer {
                background-color: #99f;
            }
            td {
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>

    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
            </ul>
        </div>

        <div class="content">
            <h1>Main Content</h1>
                <table>
                    <tr>
                        <td>this is a really</td>
                        <td>wide table which</td>
                        <td>I am using to push</td>
                        <td>the content down</td>
                        <td>need to keep going</td>
                        <td>so that it breaks</td>
                        <td>in ie6</td>
                        <td>but naturally</td>
                        <td>nothing else</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                        <td>sghskdhksdhfsdhffs</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="footer">
            <p>Copyright blah blah blah</p>
        </div>
    </body>
</html>

Answer 1

如你所说，你已经尝试过绝对的位置。但我会尝试以下内容，它可能对你有用。这是CSS：

.container {
    position:relative;
}
.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0 !important;
    left: -15em;
}

.content {
    margin-left: 15em;
}
.footer {
}

一些解释：菜单位于绝对位置，与其他内容无关。但是，IE将菜单相对于“content”div放置，并将其隐藏在“content”div之后。解决方法是将其置于负面位置，就像内容div具有“margin-left”一样，左边的em也是如此。但这应该仅针对IE进行，因此添加“左0！重要”（但在左侧之前），这是因为IE忽略“！important”而其他浏览器确认它并将使用“left 0”

更新

正如Alohci指出的更好的方法是使用“* html”黑客，在这种情况下，“菜单”的CSS变为：

.menu {
    width: 14em;
    position:absolute;
    top: 0;
    left: 0;
}

* html .menu {
     left: -15em;
}

Answer 2

为什么不使用已建立的布局，例如http://layouts.ironmyers.com/

或者您可能想调查此css overflow

拥有look at this，有帮助吗？

修改

尝试以下修复方法之一：（你可以使用像@Blake建议的一些条件代码）

溢出：滚动 - 这可以确保您的内容以设计为代价（滚动条很难看）

溢出：隐藏 - 只是切断任何溢出。这意味着人们无法阅读内容。

.content { margin-left: 15em; zoom: 1; overflow:scroll /* overflow:hidden */ /* probably second best */ }

尝试查看此问题How to prevent long words from breaking my div?这是您的问题吗？

Answer 3

使用IE6的一些条件注释来读取并放置在必要的CSS中以修复有问题的div的宽度，如下所示：

<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->

You can read more on the conditional comments here.

Answer 4

删除zoom: 1; 在IE6中让我的工作正常。

Answer 5

太晚了，但通常我会通过添加或绝对宽度（一个以像素为单位的数字，点或任何硬度量系统而不是em，％等）来修复flots，或者有时候将min-width属性解决，另外，由于boxmodel总和，要小心填充和边框。

Answer 6

我已经遇到过这么多次，我只是试图完全远离浮子。也就是说，有一些事情可以让它们发挥作用，但你可能不得不采用固定的布局和/或some IE6 specific fixes。以下是您可以尝试的一些事项：

这可能听起来像异端邪说但是表格布局没有错，他们只是不酷。
尝试使用设置'container'div 固定宽度和自动边距。
如果这不起作用，请尝试修复宽度'内容'div与您的固定 width'container'div。

Answer 7

对这个职位感到满意：绝对的主意。这类似于我几乎采用的一种解决方案。

这里的问题是，如果菜单比内容长（并且经常是这样），菜单将覆盖页脚。我可以尝试在内容中添加任意高度以尝试强制最小高度，但我不会真正知道菜单有多大。在该领域的侧板上有很多可能性。

我认为没有办法迫使相对定位的容器响应绝对定位的内容而增长，是吗？即使它是IE6 hack，因为我可以将float方法用于其他浏览器。

（再次，抱歉没有将此作为评论发布，但我不认为这是一个选项）

CSS Floats - IE6中的内容下降

7 个答案: