table之thead兼容

今天遇到一個小bug,是關於table中thead,tbody,tfoot的兼容問題:瀏覽器

在開發的時候爲了方便寫樣式,我就把表格的標題部分關於th的內容放在了thead中,固然了,我也沒有寫tbody和tfoot,此時,檢查兼容的時候問題隨之而來:佈局

  在IE,Chrome,Opera下都沒問題,可是在Firefox中出現了一個問題,下面tr的內容統一貫上走了一個tr,最後一個tr的內容變爲空了,與thead的內容重合,我首先想到的是我沒有浮動啊,什麼狀況。隨後我檢查了下元素,將thead改成tr,問題解決。教程

  隨後我搜了下thead兼容問題,W3C的解釋是:開發

  註釋:若是您使用 thead、tfoot 以及 tbody 元素,您就必須使用所有的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。<thead> 內部必須擁有 <tr> 標籤!table

  提示:在默認狀況下這些元素不會影響到表格的佈局。不過,您能夠使用 CSS 使這些元素改變表格的外觀。<thead>、<tbody> 以及 <tfoot> 不多被使用,這是由於糟糕的瀏覽器支持。咱們指望在 XHTML 的將來版本中這種狀況會發生變化。假如您使用 Internet Explorer 5.0 或更新的瀏覽器,能夠在咱們的 XML 教程中查看一個例子。bug

  最後本身總結下:thead,tbody,tfoot儘可能不用了,若是要用就所有用上且記得把tr寫在thead中;總結

相關文章
相關標籤/搜索