firefox|js|解決|顯示|tbody
今天幫別人寫一個網頁，發現：當用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 >
<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 >
<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可以起到對行進行分組的作用，當一次需要顯示或隱藏多行時很有用。
