IE8 horizontal scrollbar problem_问答_开发者_运维开发者技术经验分享

IE8 horizontal scrollbar problem

开发者 https://www.devze.com 2023-02-21 21:12 出处：网络

I have an IE8 buggy horizontal scrollbar problem, similar to this: DIV with overflow:auto and a 100% wide table

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

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>

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/

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>

add: