IE8 horizontal scrollbar problem

一笑奈何 提交于 2020-01-11 06:42:09

问题


I have an IE8 buggy horizontal scrollbar problem, similar to this:

DIV with overflow:auto and a 100% wide table

(unfortunately the solution suggested there (with zoom=1) does not work here,
or I don't know how to apply)

the horizontal scrollbar should not appear (it does not appear in FF or Chrome
but it appears in IE8)

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>

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?)


回答1:


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>




回答2:


With your first example, if you move the width:30em from the inner most DIV to it's parent the horizontal scrollbar no longer appears in IE8 and still functions properly in other browsers:

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>

Live Demo: http://jsfiddle.net/rev7J/




回答3:


What you need to do is change the overflow value from "scroll" to "auto". Scroll gives both horizontal and vertical bars whether you need them or not. Also IE for some reason requires the innermost box to be slightly smaller than its outer boxes for this to work correctly. Finally that means if you want to change your background do so in an outer Div rather than inside an inner one.

See the solution to your inquiry below:

<!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>



回答4:


add:

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


来源:https://stackoverflow.com/questions/5546454/ie8-horizontal-scrollbar-problem

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!