Поведение высоты строки таблицы в IE против Firefox / Chrome / Safari - PullRequest
Новая
       20

Поведение высоты строки таблицы в IE против Firefox / Chrome / Safari

0 голосов
/ 20 сентября 2009

Рассмотрим следующую простую HTML-разметку страницы: 

<!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>
    <title></title>
<style type="text/css">
        body, html
        {
            height: 100%;
            width: 100%;
        }
        td
        {
            border:1px solid red;
        }
        table
        {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
        <tr>
            <td style="width: 100%; height: 100%;">
                cell 1
            </td>
            <td style="width: 100%; height: 100%;">
                cell 2
            </td>
        </tr>
        <tr>

            <td style="width: 100%; height: 100%;">
                cell 3
            </td>
            <td style="width: 100%; height: 100%;">
                cell 4
            </td>
        </tr>
    </table>
</body>
</html>

В IE 7/8 / Opera высота тегов 100% интерпретируется как 100% страницы, где, как и в Firefox / Chrome / Safari, вся таблица занимает всю высоту страницы, и вместо этого , строки таблицы заполняют оставшееся пространство, которое им дано. Мне нужно, чтобы IE вел себя так же, как браузеры без IE. Есть ли способ получить такое же поведение в IE, используя XHTML-переходный тип документа? Я работал над сумасшедшей подпрограммой javascript, чтобы имитировать поведение, но мне интересно, есть ли более простой способ, такой как CSS-хак или что-то в этом роде. Спасибо!

1 Ответ

2 голосов
/ 20 сентября 2009

Я обновил вашу разметку, чтобы таблица и ее строки были стилизованы вместо отдельных ячеек таблицы. Кроме того, каждой строке выделяется 50% высоты вместо 100%, ранее выделенных отдельным ячейкам таблицы.

Следующая разметка выглядит аналогично для Internet Explorer 7, FireFox 3.5.3, Google Chrome 3.0.195.21 и Opera 10 и, наконец, Safari 4.0.3, но не в последнюю очередь. 

<!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>
    <title>Test Bed</title>
    <style type="text/css">
      html, body, table
      {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;            
        border-collapse: collapse;
      }               

      table tr.firstRow 
      {
        height: 5%;
      }

      table tr
      {
        height: 95%;
      }

      table td 
      {
        border:1px solid red;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <table cellpadding="0" cellspacing="0">
      <tr class="firstRow">
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
      <tr>
        <td>cell 3</td>
        <td>cell 4</td>
      </tr>
    </table>
  </body>
</html>
...