Javascript IE与Firefox/Chrome/Safari中的表格行高行为
考虑以下简单的html页面标记：Javascript IE与Firefox/Chrome/Safari中的表格行高行为,javascript,css,internet-explorer,firefox,xhtml,Javascript,Css,Internet Explorer,Firefox,Xhtml,考虑以下简单的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
<!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>
正文，html
{
身高：100%；
宽度：100%；
}
运输署
{
边框：1px纯红；
}
桌子
{
边界塌陷：塌陷；
}
第1单元
第2单元
第三单元
第4单元
在IE 7/8/Opera中，标签的100%高度被解释为页面的100%，而在Firefox/Chrome/Safari中，整个表格占据了页面的整个高度，相反，表格行填充了剩余的空间。我需要IE与非IE浏览器的行为方式相同。有没有办法在IE中使用XHTML过渡doctype获得相同的行为？我一直在开发一个疯狂的javascript例程来模拟这种行为，但我想知道是否有一种更简单的方法，比如CSS黑客之类的。谢谢 我已经更新了您的标记，以便对表及其行进行样式设置，而不是对单个表单元格进行样式设置。此外，每个行都分配了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>
试验台
html、正文、表格
{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
边界塌陷：塌陷；
}
表tr.firstRow
{
身高：5%；
}
表tr
{
身高：95%；
}
表td
{
边框：1px纯红；
宽度：100%；
}
第1单元
第2单元
第三单元
第4单元