考虑以下简单的 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 之类的。谢谢!
最佳答案
我已经更新了您的标记，以便为表格及其行设置样式，而不是为单个表格单元格设置样式。此外，每一行都分配了 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>
关于javascript - IE 与 Firefox/Chrome/Safari 中的表格行高行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1449465/