IE8水平滚动条问题 [英] IE8 horizontal scrollbar problem
问题描述
我有一个IE8水平滚动条问题，
类似于：
I have an IE8 buggy horizontal scrollbar problem, similar to this:
DIV with overflow：auto and a 100％wide table problem
（不幸的是，这里的解决方案（缩放= 1）在这里不工作，
或我不知道如何申请）
(unfortunately the solution suggested there (with zoom=1) does not work here,
or I don't know how to apply)
水平滚动条不应出现
（它不会出现在FF或Chrome
，但它出现在IE8中）
the horizontal scrollbar should not appear
(it does not appear in FF or Chrome
but it appears in IE8)
示例代码和CSS表格：
the sample code, with CSS tables:
<!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>
同样的问题，绝对定位：
the same problem, with absolute positioning:
<!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解决方案不好，因为它可能隐藏一些内容; br>
padding-right可以工作，但是太脏了（多少像素？在其他浏览器中会发生什么？如果用户放大页面，会怎么样？）
the "overflow-x: hidden" solution is not good, because it may hide some content;
padding-right may work, but that's too dirty hack (how many pixels? what happens in other browsers? what if the user magnifies the page?)
推荐答案
设置显示：inline-block;对于包含红色框的div
Setting the display:inline-block; for the div that contains the red box
<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水平滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
