Проблема горизонтальной полосы прокрутки в IE8 - PullRequest
Новая
       11

Проблема горизонтальной полосы прокрутки в IE8

2 голосов
/ 05 апреля 2011

У меня проблема с горизонтальной полосой прокрутки в IE8, похожая на эту:

DIV с переполнением: авто и таблица шириной 100%

(к сожалению, решение предложилотам (с увеличением = 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>

the "overflow-x: скрытое "решение не годится, потому что оно может скрывать некоторый контент;
padding-right может работать, но это слишком грязный хак (сколько пикселей? что происходит в других браузерах? что, если пользователь увеличивает страницу?)

Ответы [ 4 ]

2 голосов
/ 05 апреля 2011

Настройка отображения: 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 голос
/ 05 апреля 2011

В первом примере, если вы переместите 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>

Демонстрационная версия: http://jsfiddle.net/rev7J/

0 голосов
/ 21 марта 2012

добавить: 

 style="max-height:none\9;"
0 голосов
/ 05 апреля 2011

Что вам нужно сделать, это изменить значение переполнения с «прокрутки» на «авто». Прокрутка дает как горизонтальные, так и вертикальные полосы, нужны они вам или нет. Также IE по какой-то причине требует, чтобы самый внутренний блок был немного меньше его внешних блоков, чтобы это работало правильно. Наконец, это означает, что если вы хотите изменить свой фон, делайте это во внешнем 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...