Отображение: ячейка таблицы не устанавливает высоту постоянно - PullRequest
Новая
       24

Отображение: ячейка таблицы не устанавливает высоту постоянно

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

Я настраиваю страницу с кучей динамического контента.Я организую это в таблице.Есть три ряда, каждый с одной ячейкой.Верхняя часть работает как фиксированный заголовок, так как я установил высоту верхней ячейки.Нижняя ячейка работает как нижний колонтитул, так как имеет статическую высоту.Общая высота таблицы установлена ​​на 100%, а средняя строка / ячейка оставлена ​​для заполнения динамическим содержимым и оставшимся пространством в таблице.Вот пример с двумя строками для демонстрации проблемы: 

<html>
  <body>
    <div class="element_container", style="width: 600px; height: 500px;">
      <div class="table", style="display: table; height: 100%; width: 100%; background: blue;">
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 40px; width: 100%; background: green;">
          </div>
        </div>
        <div class="row", style="display: table-row;">
          <div class="cell", style="display: table-cell; height: 100%; width: 100%; background: red;">
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

В Chrome / Firefox / Safari общая высота таблицы сохраняется на уровне 500 пикселей.В IE8 он становится 540px, как если бы высота 100% от второй ячейки наследовалась от самой таблицы, а не от ее родительской строки.

Есть ли способ заставить таблицы работать одинаково в разных браузерах?Или, по крайней мере, получить такую ​​же функциональность в таблицах в IE8?

Ответы [ 2 ]

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

Не знаете, почему вы пытаетесь создать таблицу, не используя только тег таблицы? Похоже, это работает нормально. 

<html>
  <body>
    <table style="width:600px; height:500px; background:blue;">
      <tr>
        <td style="height:40px; background: green;">Hi</td>
      </tr>
      <tr>
        <td style="background: red;">Hello</td>
      </tr>
    </table>
  </body>
</html>
0 голосов
/ 25 октября 2010

Одной из самых больших проблем в IE являются его интерпретации по умолчанию для выравнивания ячеек, а также альтернативная блочная модель.Часто в браузерах, соответствующих стандартам, высота 500px выше или шире в IE.

Наилучшим вариантом является использование условных комментариев для таблиц стилей IE.чтобы сайт выглядел одинаково во всех браузерах.

Попробуйте что-то вроде: 

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]--> 

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->

С другой стороны, кажется, нет никакой причины использовать таблицу.Вместо этого создайте элементы div для более согласованного макета.

...