CSS Floats - 内容在 IE6 中下降答案

【问题标题】：CSS Floats - content falling down in IE6CSS Floats - 内容在 IE6 中下降
【发布时间】：2014-08-15 13:53:46
【问题描述】：

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

但是，在 Internet Explorer 6 中，如果内容太宽，它会落在菜单下方。这意味着您有大量空白，并且在不滚动的情况下根本看不到任何内容。

很遗憾，我无法更改内容 - 这是对托管第 3 方内容的网站的重新设计，更改该内容超出了我的能力范围。

此外，菜单和内容下方都必须有一个页脚栏。

我几乎可以通过使用绝对定位为 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>

【问题讨论】：

我不知道如何将 2 个 cmets 添加到相同的答案中......但无论如何......虽然我设法通过溢出解决了这个问题，但它产生了一个更糟糕的问题，我会最终得到 2 组滚动条。导航一张非常大的桌子变得非常困难。您必须使用一个滚动条才能找到另一个滚动条。然后使用第一个再次向上滚动等等。它只是产生了很多可用性问题。（这并不是说它不能工作..）

标签： html css xhtml internet-explorer-6

【解决方案1】：

正如您提到的，您已经尝试过绝对位置。但我会尝试以下方法，它可能对你有用。这是 CSS：

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

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

一些解释：菜单是绝对定位的，独立于其他内容。但是，IE 将菜单相对于“内容”div 放置，并将其隐藏在“内容”div 后面。解决方法是将其定位为负数，就像内容 div 具有“margin-left”的左侧一样多的 em。但这应该只对 IE 进行，因此添加了“left 0 !important”（但在负左之前），这是因为 IE 忽略了“！important”，而其他浏览器确实承认它并将使用“left 0” .

更新：

正如 Alohci 所说，更好的方法是使用“* html”破解，在这种情况下，“菜单”的 CSS 变为：

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

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

【讨论】：

好主意。似乎工作。就我个人而言，我宁愿使用 * html hack 或条件 cmets 来定位 IE6，而不是 !important，因为使用 !important 有一些可访问性影响，但仍然很酷。

【解决方案2】：

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

或者你可能想调查这个css overflow

有一个look at this，有帮助吗？

编辑：

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

overflow:scroll -- 这可以确保您的内容可以被看到，但会以设计为代价（滚动条很难看）

overflow:hidden -- 只是切断任何溢出。这意味着人们无法阅读内容。

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

试试看这个How to prevent long words from breaking my div?这是你的问题吗？

【讨论】：

天哪，真快！：）谢谢回复。我尝试了许多已建立的布局，但不幸的是它们都有相同的问题 - 内容位于菜单下方，反之亦然，如果有很多不可打包的内容。我以前没有遇到过 Ironmyers 网站，但我试了一下，菜单位于内容下方。

【解决方案3】：

使用 IE6 的一些条件 cmets 读取并放入必要的 CSS 以修复有问题的 div 的宽度，如下所示：

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

【讨论】：

谢谢，但问题不在于如何从 IE6 中隐藏内容，更了解我需要隐藏的具体内容是什么。 :)
他不是建议你在 IE 中隐藏你的内容，而是建议使用特定的 css hack 来修复 IE6 问题。

【解决方案4】：

删除zoom: 1；让它在 IE6 中对我来说工作得很好。

【讨论】：

这对我没有任何改变，你确定吗？尝试使您的浏览器更窄。我添加了 zoom: 1 来强制 haslayout 解决了我认为 IE7 中的问题。
是的 - 它对我来说仍然可以正常工作，IE 6.0.2900.2180 等 (xp sp2)。嗯。

【解决方案5】：

为时已晚，但通常我通过添加或绝对宽度（以像素、点或任何硬测量系统而不是 em、% 等为单位的数字）或有时放置 min-width 属性来解决它，另外，由于 boxmodel 的总和，请注意填充和边框。

【讨论】：

【解决方案6】：

我已经多次遇到这种情况，我只是试图完全远离花车。也就是说，你可以做一些事情来让它们工作，但你可能不得不接受一个固定的布局和/或some IE6 specific fixes。以下是您可以尝试的一些方法：

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

【讨论】：

非常感谢您的建议。我认为可能基于表格的布局是答案，但它不是我喜欢的，因为它使网站不那么灵活（因此小屏幕等更难设置样式）不幸的是，在容器上设置固定宽度似乎没有帮助，除非我让它比内容更宽，但由于我不知道宽度需要多少，我不确定它是否实用。

【解决方案7】：

感谢职位：绝对的想法。这类似于我几乎采用的一种解决方案。

这里的问题是，如果菜单比内容长（而且经常如此），菜单会覆盖页脚。我可以尝试向内容添加任意高度以尝试强制最小高度，但我真的不知道菜单会有多大。该区域的侧面板有很多潜力。

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

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

【讨论】：