Question

我遇到了以下问题：
如何制作一般容器（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

Answer 1

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

我带走了包含div，因为我认为它们不是必要的，但如果你绝对需要它们，我就不会发现将它们重新加入的问题。

Answer 2

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

一般容器 - IE8水平滚动条问题

2 个答案: