【FireFox】在Firefox中，關於隱藏table中某一行tr，其他td的邊框顯示異常

    最近在開發的過程中遇到了這樣的一個奇怪的問題：一個table中，只有一行中的td上有border，其他的td沒有邊框。但是，通過js隱藏某一行時，意外的發現其他的td中居然出現了邊框。當然，直接上簡單示例吧，要不這個情況很難用描述語言說清楚。

    為了說明這個問題，特意寫了一個非常簡單的示例頁面，它只包含了非常必要的結構和樣式。html部分如下：

< button  onclick ="document.getElementById('hide').style.display='none'" >hide </ button >
< table >
     < tbody >
         < tr >
             < td >A </ td >
             < td >B </ td >
             < td >C </ td >
         </ tr >
         < tr class="m" >
             < td >aaaaa </ td >
             < td >bbbbb </ td >
             < td >ccccc </ td >
         </ tr >
         < tr >
             < td >11111 </ td >
             < td >22222 </ td >
             < td >33333 </ td >
         </ tr >
         < tr  id ="hide" >
             < td >11111 </ td >
             < td >22222 </ td >
             < td >33333 </ td >
         </ tr >
        ......<!-- 此處省略很多相同的行 -->
     </ tbody >
</ table >

    css的樣式如下：

table{  border: 1px solid red;  border-collapse: collapse;}
table tr td{  border: none;}
table tr.m td{  border: 1px solid blue;}
table tr th{  border: 1px solid green;}

     思路很簡單，就是表格有一個外邊框，所有的td都沒有邊框，只有在tr的class為m的時候，這一行的表格才會有邊框。表格的上面有個按鈕，點擊這個按鈕，表格中的某一行會被隱藏（id為hide的那個）。頁面在初始打開的時候如下圖：

 

但是，當點擊hide按鈕時， 第4行隱藏了，奇怪的是，在FireFox下，第二行的那個藍色邊框會延展到整個表格，如下圖：

 

這是一個非常令人匪夷所思的現象，實際上，隱藏的那行不應該影響其他列的顯示。相同的代碼，我在IE789，Chrome上都嘗試過，都沒有出現這個問題。都是如下圖：

 

     關於這個問題，我又進行了如下的嘗試，就是改變藍色格子出現的位置，還像上面的代碼，把class=“m”放到第一行，如下：

< table >
     < tbody >
         < tr  class ="m" >
             < td >A </ td >
             < td >B </ td >
             < td >C </ td >
         </ tr >
         < tr >
             < td >aaaaa </ td >
             < td >bbbbb </ td >
             < td >ccccc </ td >
         </ tr >
         < tr >
             < td >11111 </ td >
             < td >22222 </ td >
             < td >33333 </ td >
         </ tr >
         < tr  id ="hide" >
             < td >11111 </ td >
             < td >22222 </ td >
             < td >33333 </ td >
         </ tr >

 就是帶有邊框的格子放在了第一行上，這樣，再點擊hide按鈕，一切都正常了，藍色的邊框不會延展到其他的td中去。

    繼續嘗試，我不斷改變class=“m”和id="hide"的位置，發現這樣的一個規律，就是無論藍格子和要隱藏的tr放在什么位置，只要它們相隔一行，就會出現上述邊框延伸的情況。即：class=m和要隱藏的行中間間隔一個tr的時候，FireFox會出現邊框延展。

    需要指出的幾點：

    第一，該問題只會出現在FireFox上（個人的FF版本是16.0，經過FF13,15測試，都是一樣會出現這個結果，早些的版本不清楚）；

    第二，這個問題只會出現在隱藏或顯示一個tr的時候。隱藏某個td不會出現該問題。

    第三，帶有border的那一行必須和需要隱藏的tr之間，必須只能相隔一個tr，相鄰或間隔多個tr時，都不會出現這個問題。

    第四，table的樣式必須要有：border-collapse:collapse;和border:1px solid red;（顏色不一定是red，可以為任何顏色），table去掉這兩個中的任意一個樣式，都不會出現這個問題。

    第五，這個border的延伸，是不確定的，就是說他不會將所有下列的td都加上border，有可能會出現如下圖的情況：

 圖中的藍色的線並沒有打通，並且在鼠標對數據進行全選的時候，會發生變化

    第六，出現表格的td只會是應有邊框的那一行的下面，它上面的td不會出現這個問題。

    綜上，個人感覺這個應該算是FF的一個小bug，我嘗試了其他的各個版本的瀏覽器，都不會出現這個問題。我嘗試在網上尋找問題，但是目前還沒有找到相似的資料。至於解決辦法，可以參考上面總結的幾點，只要有一點不滿足，這個問題應該就不會出現了。比較惡心的是，我的開發過程中，偏偏遇到了這個情況。這個問題是本人今天才遇到的，還沒有找到解決辦法，再加上在網上沒有看到哪位朋友具體說到這個問題，因此在這里做個記錄，持續解決中。如果找到了最終的解決辦法，我會更新這個日志。同時也非常希望大家能夠分享相關的經驗。3QQQ