今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。看下面这个例子：
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body οnlοad="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
它在firefox中显示时，“第一行”被显示在最后一行。
于是在处理好需要显示的行后，另写了一个函数，先记录需要显示的行，然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样，IE和firefox的显示结果就一样了。
后来，我还是觉得这个方法很笨，就又潜心研究了一番，发现，只要将第二行和都三行都加上style="display:block"，显示也就正常了。见下面的代码：
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body οnlοad="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2" style="display:block">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3" style="display:block">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
由此可见，firefox对是否设置style="display:block"是区别对待的，而IE作了适当的兼容处理。
结论和教训是：尽量使用标准做法，不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注：如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。
TBODY在firefox下用js显示和隐藏时出现错位的解决方法
最新推荐文章于 2017-03-14 11:46:40 发布
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
