[css] display 屬性

2014-03-04

1325
0

Chrome 上表格顯示錯亂

維護到一個 ASP 舊程式，程式最後跑出來的 HTML code 大約是類似這樣。

<!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>
    <script type="text/javascript">
        function ShowAll() {
            tr1.style.display = 'block';
            tr2.style.display = 'block';
            tr3.style.display = 'block';
        }
    </script>
</head>
<body>
    <table border="1" style="border-color: red;">
        <tr id="tr1">
            <td>AAAA</td>
            <td><a href="#" onclick="ShowAll();">ShowAll</a></td>
        </tr>
        <tr id="tr2" style="display: none;">
            <td>bbbb</td>
            <td>2222</td>
        </tr>
        <tr id="tr3" style="display: none;">
            <td>cccc</td>
            <td>3333</td>
        </tr>
    </table>
</body>
</html>

很簡單的code，原作者希望使用者點擊 ShowAll 後，二三列再顯示出來。

這在 IE 是可以如預期正確顯示的。然而，在 chrome / firefox 上卻出錯了。變成如下的畫面

乍看之下，像是多或少了一些 tag 造成的。然而我找了許久，卻找不到有這樣的狀況。

後來只好土法煉鋼，一個個找、排除。最後才發現問題出現在 tr1.style.display = 'block'; 。

翻查了 css display 資料，因為我這邊要設定表格的列顯示，所以應該要設定成 table-row 才是正確的。

IE 在這方面，自動的調整了顯示。

節錄網頁部分資訊

註釋：如果規定了!DOCTYPE，則Internet Explorer 8 （以及更高版本）支持屬性值"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、" table-column"、"table-column-group"、"table-row"、"table-row-group"、以及"inherit"。

回首頁