Полоса прокрутки исчезает в IE7

У меня установлен div для переполнения: авто, максимальная ширина 250 пикселей.

Внутри div у меня есть элемент управления разбиением по страницам, который позволяет пользователям возвращать 10, 20, 50 или 100 результатов. Если они получат достаточно результатов, внутреннее содержимое (таблица) станет больше, чем div, и тогда его следует будет прокручивать.

Это отлично работает в Firefox 3.5 и IE8, однако в IE7 полоса прокрутки отображается только после первой обратной передачи, для которой требуется полоса прокрутки (например, пользователь выбирает 20). Если затем пользователь выберет другое количество, для которого требуется полоса прокрутки (50, 100), полоса в IE7 исчезнет.

Если пользователь возвращается к 10 результатам (прокрутка не требуется), затем переходит к 20 результатам (требуется прокрутка), полоса прокрутки снова отображается в IE7.

Я все еще могу прокручивать внутреннее содержимое колесиком мыши, просто нет полосы прокрутки.

Кто-нибудь знает, в чем может быть проблема? Я в тупике ... могу предоставить подробности, если нужно.

Уточнение: полоса прокрутки исчезает, даже когда содержимое выходит за пределы Div.


scrollbar asp.net overflow internet-explorer-7
person David    schedule 09.03.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Измените свойство CSS overflow с auto на scroll

См. http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow.

person Dancrumb    schedule 09.03.2010
comment
Да, это крайняя мера. Проблема заключается в том, что пользователи будут видеть уродливую серую полосу прокрутки, даже если внутреннее содержимое не нужно прокручивать. - person David; 10.03.2010
comment
Итак ... что вы хотите, чтобы они увидели? Вы можете просто подделать его и заполнить внутреннее содержимое так, чтобы его всегда можно было прокручивать. - person Dancrumb; 10.03.2010
comment
Когда есть 10 результатов (с записями в 1 строку), на нем не должно отображаться полосы прокрутки (поскольку она умещается в Div). Все, что превышает 10 результатов или 10 результатов, каждый из которых превышает 1 строку, должны быть прокручиваемыми. Думаю, я мог бы сделать Div меньше 10 записей, чтобы он всегда был прокручиваемым. Но кажется странным строить дизайн вокруг того, что кажется ошибкой в ​​IE7. :( - person David; 10.03.2010
comment
Прошу прощения, после прочтения этого комментария я понял, что неправильно понял, что происходит. Мне было непонятно, исчезла полоса прокрутки, хотя содержимое переполняло DIV. Я удалю этот пост; возможно, стоит прояснить ваш вопрос, если другие такие же тупые, как я :) - person Dancrumb; 10.03.2010

arrow_upward
0
arrow_downward

У меня была аналогичная проблема, и мне удалось ее решить. Теперь поймите, что у меня ширина таблицы установлена ​​на 100%. Я считаю, что проблема связана с типом документа. Я попытался установить для параметра doctype значение

<!DOCTYPE html> <!-- HTML5 -->

и у меня все еще была та же проблема. Ошибка IE7 исчезла только после удаления объявления doctype (режим quirks, который я бы не рекомендовал). Я также протестировал его с помощью объявлений типа документа XHTML 1.0 / 1.1 / HTML 4.01 (Strict, Transitional, Frameset), и возникла та же проблема. Похоже, эта проблема возникает из-за того, что объявление doctype указывает браузеру использовать стандартный режим. IE7 и ниже не очень хорошо справляются с просмотром в стандартном режиме.

Чтобы решить эту проблему для IE7, я установил ширину 99%.

Вот рабочий пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  #Content
  { 
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
    width: 100px;
  }
</style>
</head>
<body>
  <div id="Content">
    <table width="99%" border="1">
      <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>
person user717236    schedule 21.12.2011