IE 与 Firefox/Chrome/Safari 中的表格行高行为答案

【问题标题】：Table row height behavior in IE vs Firefox/Chrome/SafariIE 与 Firefox/Chrome/Safari 中的表格行高行为
【发布时间】：2010-11-29 18:51:19
【问题描述】：

考虑以下简单的 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 浏览器相同。有没有办法使用 XHTML 过渡文档类型在 IE 中获得相同的行为？我一直在研究一个疯狂的 javascript 例程来模仿这种行为，但我想知道是否有更简单的方法，比如 CSS hack 之类的。谢谢！

【问题讨论】：

标签： javascript css internet-explorer firefox xhtml

【解决方案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>

【讨论】：

这绝对是一种更正确的方法，但它并不是我正在寻找的特定场景。在 Firefox 中，假设您将第一行中的单元格设置为静态“50px”高度。如果将第二行单元格设置为“100%”高度，它将填满我的 100% 高度表的剩余空间，而不占用 100% 的页面。由于我已将表格指定为 100% 的页面，因此无论单元格中使用什么类型的高度，我都需要单元格占用剩余空间。
@Nate：要让它工作，你必须删除过渡 DTD。最好让最后一行增长到表格的大小而不是 100% 的高度，这可以被一个浏览器解释为“表格的完整大小”而不是“表格的剩余部分”。
如果您的表格有一个没有指定高度的 td，并且表格的高度是 100%，那么没有高度的 td 应该填满所有剩余空间。
@David：长话短说，我正在开发一个奇怪的 ASP 项目，感谢您的 quirks mode 建议，我想到了仅从服务器端强制 IE 进入 quirks 模式的想法效果很好。我知道 IE 更从字面上理解了 W3C 规范，但这并不能真正帮助开发人员；)
@Nate：我很高兴这有点适合你。怪癖模式来袭。