Question

考虑以下简单的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 hack或其他东西。谢谢！

Answer 1

我已更新您的标记，以便对表格及其行进行样式设置，而不是单个表格单元格。此外，每行分配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>

IE与Firefox / Chrome / Safari中的表行高度行为

1 个答案: