我有一个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可能会起作用,但这太糟糕了(多少像素?其他浏览器会发生什么?如果用户放大页面会怎样?)
答案 0 :(得分:2)
设置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>
答案 1 :(得分: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>
答案 2 :(得分:0)
您需要做的是将溢出值从“滚动”更改为“自动”。无论您是否需要,滚动都会给出水平和垂直条。 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>
答案 3 :(得分:0)
添加:
style="max-height:none\9;"