IE8拉伸表格单元格高度

Posted

技术标签:

【中文标题】IE8拉伸表格单元格高度【英文标题】:IE8 stretching table cell height 【发布时间】: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 上设置高度。

【问题讨论】:

【参考方案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,imagemargin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;
  td.zline-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  src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>
  </tr><tr>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>
    <td class="z"><image  src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>
    <td class="z"><image  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 或全新的布局。

以上是关于IE8拉伸表格单元格高度的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS 拉伸表格单元格的背景图像?

使用 UITableViewAutomaticDimension 时 UIImageView 拉伸不正确

拉伸图像高度css

具有动态高度单元格但所有单元格同时显示的 iOS 表格视图

pythondocx模块设计表格单元格高度

部分滑动单元格后,表格视图单元格高度缩小