IE8水平滚动条问题答案

【问题标题】：IE8 horizontal scrollbar problemIE8水平滚动条问题
【发布时间】：2011-07-29 14:55:23
【问题描述】：

我有一个 IE8 错误的水平滚动条问题，类似这样：

DIV with overflow:auto and a 100% wide table

（不幸的是，那里建议的解决方案（缩放=1）在这里不起作用，
或者我不知道如何申请）

水平滚动条不应出现（它不会出现在 FF 或 Chrome
但它出现在 IE8 中）

示例代码，带有 CSS 表格：

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

同样的问题，绝对定位：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="position: absolute;">
<div style="overflow-y: scroll; height: 19em;">
<div style="width: 30em; height: 30em; background-color: red;"></div>
</div>
</div>
</body>
</html>

“overflow-x:hidden”的解决方法不好，因为它可能会隐藏一些内容；
padding-right 可能会起作用，但那太脏了（多少像素？在其他浏览器中会发生什么？如果用户放大页面怎么办？）

【问题讨论】：

我想要一个纯 CSS 的解决方案（无 javascript）
我发布了另一个问题，概括了这个问题；请检查一下，让我们去那里：stackoverflow.com/questions/5554137/…

标签： css internet-explorer-8

【解决方案1】：

在您的第一个示例中，如果您将 width:30em 从最内层的 DIV 移动到它的父级，水平滚动条将不再出现在 IE8 中，并且在其他浏览器中仍然可以正常工作：

HTML：

<div style="display: table;">
    <div style="display: table-cell;">
        <div style=" width:30em; height: 19em;overflow-y: scroll;">
            <div style="height: 30em; background-color: red; ">Content goes here.</div>
        </div>
    </div>
</div>

现场演示： http://jsfiddle.net/rev7J/

【讨论】：

这同样适用于您的第二个示例（绝对定位的 DIV）。
我没有讲完整的故事：我尝试制作一个通用的容器，红色框只是其中的一个示例内容；所以我们不应该用红色盒子戳。我发布了另一个问题，概括了这个问题；请检查一下，让我们去那里：stackoverflow.com/questions/5554137/…
@slobo，那么您能否将适合您列出的问题的答案之一标记为正确？

【解决方案2】：

您需要做的是将溢出值从“滚动”更改为“自动”。无论您是否需要，滚动都会提供水平和垂直条。此外，出于某种原因，IE 要求最内层的盒子比其外层的盒子略小，这样才能正常工作。最后，这意味着如果您想更改背景，请在外部 Div 中而不是在内部 Div 中进行。

请参阅以下问题的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
#redBox  {
    position:relative;
}
#insideBox {
    overflow:auto;
    height: 19em;
    width:30em;
    background-color: red;
}

#innerMost {
    width: 28em;
    height: 30em;
}
</style>
</head>
 <body>
<div id="redBox">
    <div id="insideBox">
        <div id="innerMost">
        </div>
        </div>
</div>
</body>
</html>

【讨论】：

根据您的上述答案，您甚至不必为#innerMost DIV 设置宽度或高度 - 只需为样式添加一些填充：jsfiddle.net/RnHs2 似乎跨浏览器效果很好.
我没有讲完整的故事：我尝试制作一个通用容器，即垂直受限，但可以水平增长。我发布了另一个问题；请检查一下，让我们去那里：stackoverflow.com/questions/5554137/…

【解决方案3】：

设置显示：inline-block;对于包含红色框的 div

 <div style="display: table;">
<div style="display: table-cell;">
    <div style="overflow-y: scroll; height: 19em; display:inline-block;">
        <div style="width: 30em; height: 30em; background-color: red;"></div>
    </div>
</div>

【讨论】：

同意，他提到了IE8的问题，所以我只是在那里尝试，如果他需要兼容IE7/6，它可能不起作用，我没有测试那里的错误所以不太确定.
这是可能的解决方案之一； float: left和position: absolute也可以
感谢您的到来，使用浮动解决方案您需要清除元素，不是吗？
不，我不必清除它。这个解决方案有两个小问题： 1：我不能使用overflow-y: auto，因为它会导致FF和Chrome中出现水平滚动条； 2：在 IE8 中，垂直滚动条在框的“外面”（在 FF 和 Chrome 中它在里面；它也在 IE8 里面，没有这个 inline-block/float/position:absolute 东西）

【解决方案4】：

添加：

 style="max-height:none\9;"

【讨论】：