Question

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

DIV with overflow:auto and a 100% wide table

（不幸的是，那里建议的解决方案（使用zoom = 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可能会起作用，但这太糟糕了（多少像素？其他浏览器会发生什么？如果用户放大页面会怎样？）

Answer 1

设置display：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>

Answer 2

使用您的第一个示例，如果您将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/

Answer 3

您需要做的是将溢出值从“滚动”更改为“自动”。无论您是否需要，滚动都会给出水平和垂直条。 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>

Answer 4

添加：

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

IE8水平滚动条问题

4 个答案: