通用容器——IE8水平滚动条问题答案

【问题标题】：general container - IE8 horizontal scrollbar problem通用容器——IE8水平滚动条问题
【发布时间】：2011-04-05 23:49:32
【问题描述】：

我遇到了以下问题：
如何制作通用容器（HTML + CSS；无 javascript）
是垂直约束的（它有一个固定的外部高度），所以它可能有一个垂直滚动条
但它可以水平增长（根据容器内容的需要），所以它永远不会有水平滚动条

它必须在 IE8、FF、Chrome（没有 IE7 或更早版本）中工作

解决方案一开始似乎很简单
但我无法摆脱 IE8 中的水平滚动条：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="display: table;" class="container-div-1">
    <div style="display: table-cell;" class="container-div-2">
        <div style="overflow-y: scroll; height: 19em;" class="container-div-3">
            <div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
        </div>
    </div>
</div>
</body>
</html>

在本例中，我们需要一个 19em 高的容器，它可以根据内容的需要水平增长（在本例中为“example-cotent”div）
请不要建议修改“example-content” div，因为它只是一个示例内容（任何内容都可以存在）

这个问题是这个问题的概括： IE8 horizontal scrollbar problem

【问题讨论】：

重要：容器不应该水平扩展，只要内容需要（这就是外部 CSS 表存在的原因）
我发了一个后续问题：stackoverflow.com/questions/5558592/…

标签： css internet-explorer-8

【解决方案1】：

浮动可能会得到您正在寻找的结果。在此处查看我的示例：
http://jsbin.com/ivegi4/4/edit

我删除了包含的 div，因为我认为它们没有必要，但如果你绝对需要它们，我不会认为将它们重新添加回来。

【讨论】：

很好，它确实有效......但还有一件事：如果我想要overflow-y: auto 而不是overflow-y: scroll，FF 和 Chrome 会显示水平滚动条（IE8 不会）！我怎样才能摆脱这个水平滚动条？ jsfiddle.net/slobo/EY8kj/5
我注意到这个解决方案的一些内容：在 IE8 中，垂直滚动条超出了框的范围（这也适用于 position: absolute 和 display: inline-block 解决方案）
框外的滚动条是阻止水平滚动条出现的原因。如果它进入内部，内容的宽度将被剪裁并显示一个水平滚动条。

【解决方案2】：

在container-div-3 div 上设置position: absolute。这将导致 div 收缩包装里面的任何内容，并且在 IE8 中可以正常工作。

【讨论】：

我在 container-div-2 div 上添加了“位置：绝对”。没有改变。我错过了什么吗？？
糟糕，抱歉，应该是 3 而不是 2！现在就试试。 :)
很好，它确实有效......但还有一件事：如果我想要overflow-y: auto 而不是overflow-y: scroll，FF 和 Chrome 会显示水平滚动条（IE8 不会）！我怎样才能摆脱这个水平滚动条？ jsfiddle.net/slobo/EY8kj/7