Question

我有一个基于表格的页面布局，并且我想用更现代的标记重新构建它，这不是一个选项。布局使用跨越两行的单元格作为右侧的侧边栏，而左上角的单元格包含一个简单的标题，左下角的单元格包含页面的主要内容。左上角的单元格具有固定的高度，并且未指定底部单元格和右侧单元格的高度。我创建了一个简化示例来说明我的问题：

<!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>

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

修改我没有在右列td上设置高度，而是在右列内的div上设置高度。

Answer 1

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

Answer 2

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

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

希望有所帮助。

PS。 IE9也有同样的问题。

Answer 3

即使单元格只包含图像，您也必须知道表格单元格的高度是根据 text 基线的位置计算的;并且当前的文本样式对计算此基线位置和其后的行间距有影响。您可能认为设置“line-height：1”足以避免这种行间距，即始终出现在每行文本下方的边距。这还不够。最简单的解决方案是为包含图像的单元格设置“行高：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>

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

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

IE8拉伸表格单元格高度

3 个答案: