IE8 horizontal scrollbar problem

后端未结

关注

 4  1728

不知归路

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 (

相关标签:

4条回答

余生分开走

2021-01-15 12:54
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

情深已故

2021-01-15 13:09

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>

0 讨论(0)

小蘑菇

2021-01-15 13:12
add:
```
 style="max-height:none\9;"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-01-15 13:19

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>

0 讨论(0)