IE8拉伸表格单元格高度答案

【问题标题】：IE8 stretching table cell heightIE8拉伸表格单元格高度
【发布时间】：2011-08-25 07:19:18
【问题描述】：

我有一个基于表格的页面布局，尽管我想用更现代的标记对其进行重组，但这不是一个选择。布局使用跨两行的单元格作为右侧的侧边栏，而左上角的单元格包含一个简单的标题，左下角的单元格包含页面的主要内容。左上角的单元格有固定的高度，没有指定底部单元格和右下角单元格的高度。我创建了一个简化的示例来说明我的问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.fixed { height: 100px; }

table { border: 1px solid #000; }
td { border: 1px solid #ddd; vertical-align: top; }
tr { border: 1px solid #cfc; }
* { padding: 15px; }
</style>
</head>
<body>

<table>
<tr class="fixed">
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td>
</tr>

<tr class="stretch">
<td>left</td>
</tr>

<tr class="footer">
<td colspan="2">footer</td>
</tr>

</table>

</body>
</html>

我已将右列内联的高度设置为 500 像素，以模拟高于左两列高度的内容。这在现代浏览器中表现如预期：左上角单元格的高度保持固定，而下方单元格伸展以填充额外空间。但在 IE8 中，左侧的两个单元格都是垂直拉伸的。我需要顶部单元格保持其固定高度。如何让 IE8 仅使用 CSS 来尊重为左上角单元格指定的高度？

编辑： 我没有在右列 td 上设置高度，而是在右列内的 div 上设置高度。

【问题讨论】：

标签： html css internet-explorer html-table

【解决方案1】：

即使一个单元格只包含一张图片，您也必须知道表格单元格的高度是根据 text 基线的位置计算的；并且当前的文本样式会影响计算此基线位置及其后的行距。您可能认为设置 "line-height:1" 足以避免这种行间距，即总是出现在每一行文本下方的边距间隙。这还不够。最简单的解决方案是为包含图像的单元格设置“line-height:0.8”（或更低），以便 0.2em 默认在基线下方添加间隙（由于仍被推断为默认值到没有文本）将使基线适合单元格高度。然后，您可以在单元格中正确放置一个图像（或任何固定高度的元素），其高度将决定单元格的高度，而无需拉伸单元格的高度。

注意：使用此行高，您放置在该单元格中的任何文本的基线都将位于该单元格的底部，因此下降部分将与当前单元格的底部填充、边框、边框间距重叠，或者在下一行的单元格的边框、内边距或内容中，或者如果单元格在最后一行，则在表格下方的内容中。

在 Google Chrome（当前版本 15）上测试

示例 (HTML5)：

<!DOCTYPE html>
<html><head>
  <title>Examples of image transforms (rotations and mirroring)</title>
  <style>
  table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;}
  td.z{line-height:0;}
  </style>
</head><body>
  <table border="0" cellspacing="0" cellpadding="0">
  <tbody><tr>
    <td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td>
    <td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td>
    <td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td>
    <td style="border-bottom:hidden">Normal &minus;90° (0,1,-1,0,0,0)</td>
  </tr><tr>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>
  </tr><tr>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td>
  </tr><tr>
    <td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td>
    <td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td>
    <td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td>
    <td style="border-top:hidden">Mirrored &minus;90° (0,-1,-1,0,0,0)</td>
  </tr></tbody>
  </table>
</body></html>

请注意仅包含图像的表格单元格（行高：0）的“z”类的技巧，以使它们完全适合图像大小。此示例中显示的图像是 8 个不同方向的小方形照片。每张照片只有一个 1px 的灰色细边框，其标签显示在上方或下方，照片完全适合单元格边框。

请注意，重定向使用 WebKit 样式（适用于 Safari 和 Chrome）；您可以通过更改前缀添加 IE 和 Firefox 的等效属性；对于 CSS3，不需要前缀。如果不支持这些变换，图像将不会被重新定向/镜像，但它们仍将完全适合单元格，没有额外的内部间隙。

【讨论】：

【解决方案2】：

我认为 Jeroen 是正确的，对于这个问题没有纯 CSS 解决方案。任何时候表格中的单元格设置了rowspan，IE 都会忽略这些行上设置的任何显式高度。解决方案是永远不要使用rowspan。在我的情况下，我能够通过将跨越两行的内容放在第二行中来规避这个问题，将第一行中的单元格留空，并使用负边距将内容的开头向上移动到第一行.我希望这对其他人有帮助。如果有人确实有纯 CSS 解决方案，我会接受它作为答案。

【讨论】：

【解决方案3】：

有趣的问题。恐怕答案可能是您描述的问题没有真正的解决方案，只有变通方法。我发现在第二个“左”td 中添加一些样式会使问题消失，至少在您的示例中：

<td style="min-height: 500px;">left</td>

希望对您有所帮助。

附言。 IE9 也有同样的问题。

【讨论】：

这不是一个真正的选项，因为右列的高度在绘制页面时并不是真正固定的或已知的。
我明白了。恐怕我的答案仍然是唯一的答案：只有像我给出的那样的解决方法可能会有所帮助，否则您将不得不求助于 JavaScript 或全新的布局。