IE8拉伸表格单元格高度 [英] IE8 stretching table cell height
问题描述
我有一个基于表的页面布局，尽管我想用更现代的标记来重构它，但这不是一个选项。布局使用跨越两行作为右侧边栏的单元格，而左上单元格包含一个简单的标题，左下单元格包含页面的主要内容。左上单元格具有固定的高度，并且未指定底单元格和右单元格的高度。我创建了一个简化的示例来说明我的问题：
I have a page layout that is based on tables, and as much as I would like to restructure it with more modern markup, that is not an option. The layout uses a cell that spans two rows as a sidebar on the right side, while the upper left cell contains a simple header, and the lower left cell contains the main content of the page. The top left cell has a fixed height, and the height of the bottom cell and right cell is not specified. I have created a simplified example that illustrates my problem:
<!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为左上角单元格指定的高度？
I have set the height of the right column inline at 500px to simulate content that is taller than the height of the two left columns. This behaves as expected in modern browsers: The height of the top left cell remains fixed, and the lower cell stretches to fill the extra space. But in IE8, both left cells are stretched vertically. I need the top cell to keep its fixed height. How do I get IE8 to honor the height specified for the top left cell using only CSS?
编辑：
推荐答案
我认为Jeroen是在右边一列的div上的高度。对于这个问题没有纯CSS解决方案。任何时候，如果表中有单元格，并且 rowspan 设置，IE将忽略在这些行上设置的任何显式高度。解决方案是永远不要使用 rowspan 。在我的情况下，我能够规避这个问题，通过放置跨越第二行中的两行的内容，使第一行中的单元格为空，并使用负边距将内容的开始移动到第一行。我希望这对其他人有帮助。如果任何人有一个纯CSS解决方案，我会接受这个答案。
I think Jeroen is right that there are no pure CSS solutions to this problem. Any time there are cells in a table with rowspan set, IE is going to ignore any explicit heights set on those rows. The solution is to never use rowspan. In my situation I was able to circumvent the problem by placing the content that was spanning two rows in the second row, leaving the cell in the first row empty, and using a negative margin to move the start of the content up into the first row. I hope this is helpful to somebody else. If anybody does have a pure CSS solution I'll accept that as the answer.
这篇关于IE8拉伸表格单元格高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
