IE7 DIV расширяется, чтобы соответствовать ТАБЛИЦЕ, игнорируя директиву HEIGHT% - PullRequest
Новая
       10

IE7 DIV расширяется, чтобы соответствовать ТАБЛИЦЕ, игнорируя директиву HEIGHT%

1 голос
/ 27 октября 2010

Я бы очень признателен за ручную прокрутку таблицы с фиксированным заголовком в IE7.

В IE7 моя высокая таблица данных заставляет развернутый в ней DIV вертикально расширяться и не позволяет показывать полосу прокрутки этого DIV. Я использую отличное решение для кросс-браузерной (включая IE7) прокрутки с фиксированной разметкой таблиц из: http://www.sitepoint.com/forums/showthread.php?t=615364&page=3 , но я изменил его так, чтобы таблица заполняла страницу.

Вот как это выглядит на практике: 

<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
  <div id='results'> <!-- provides position referece to headers -->
    <div>            <!-- scrolls the table it contains -->
      <table>        <!-- incorrectly expands parent div in IE7 -->
        <tr><th><p>FIXED-HEADER HERE</p></th></tr>
        <tr><td>TALL CONTENT HERE</td></tr>
      </table>
    </div>
  </div>
</body>

Я доволен тем, как работают заголовки и прокрутка в FF и IE8. Набор отладки в IE7 показывает, что #results имеет желаемую высоту, но и DIV, и TABLE имеют одинаковое чрезвычайно высокое значение, где DIV фактически должна быть высотой #results. Если я изменю высоту DIV с% на px, он прокручивается, но, конечно, больше не изменяет размеры должным образом.

Я использую строгий тип документа. Моя таблица на самом деле содержит табличные данные, обычно 10 столбцов и 200 строк, поэтому таблица является семантически точной. Конечно, за этим столом больше контента.

Я бы предпочел не использовать javascript для динамических измерений, если только он не настолько прост, что он пуленепробиваемый, так как у меня всегда возникают глупые дефекты (о, да, я не думал переоценивать размер при наведении через гиперссылки и изменения высоты строк и т. д.).

Спасибо, Shannon

1 Ответ

0 голосов
/ 27 октября 2010

Оборачивая DIV (сохраняя существующие правила стиля) в: 

<div style="position: absolute; height: 100%; width: 100%;" } ></div>

, проблема решена.IE7 внутренности бастуют снова.Вероятно, есть более элегантный способ ее решения, не требующий более структурной разметки, я бы хотел услышать это, если вы об этом знаете.

Шеннон

...