Cross-Browser Inline Block

大約兩週前在 Mozilla Webdev Blog 上有一篇Cross-Browser Inline-Block,介紹如何用 inline block 代替 float 排列,好解決方塊高度不同時,float 排列會造成的問題,當然,這麼新(?)的 display 屬性,必定會有瀏覽器不支援,加上其實目前各家瀏覽器的行為表現都還不是很一致,所以整篇文章大部分的篇幅是在處理 cross browser 的問題。那時候 DK 長輩說我要是有什麼想法的話可以發一篇,那時候雖然覺得好像有什麼可以講的,不過直到昨天看了 flickr 的原始碼時才知道我想講的是什麼。

首先,其實這篇文章介紹的方法我覺得做的很好了,CSS hack的部份也還算乾淨,不過我很龜毛,覺得用到 inline 來做這種像是 block 的東西就是覺得怪怪的,昨天在看 flickr 時突然就在想:「他們是用什麼方法來排照片的?」打開原始碼一看,是 table,flickr 是用 table 來排照片的,我才回憶起之前買的Everything You Know About CSS is Wrong這本書,裡面主要介紹到的東西是 table-cell, table-row, ... 等表格元件的 display 屬性,又稱為 css-table,簡單說就是可以拿其他標籤來做 table,這些 display 屬性值可以讓 HTML 文件保持它比較適合的語意,但是顯示上又能夠和 table 一樣排列,雖然我在 Everything You Know About CSS is Wrong 的書評中寫到我覺得拿 css-table 來排版還是怪怪的,但是如果是拿來排照片、商品目錄這種,我就突然覺得還不錯,不過 css-table 很理所當然的和 table 一樣,一列要幾個 cell 在寫 HTML markup 階段時就要決定了,不像 float 或是 inline-block 可以透過控制長度來調整,真的達到文件結構和顯示分開的理想。

用 css-table 來排還是有它的好處,最明顯的就是同一列的 cell 高度都會一樣。想要元件高度會自動調整,然後同排的還會一樣高,目前只有用 table 的解法,不論是真的用 table 還是用 css-table,當然,盡量避免非表格資料的東西使用 table 標籤,所以比較好的處理方法還是 css-table。

兩種方法各有他的優缺點,還很難說哪種方法比較好,先不考慮 css-table 方法在舊瀏覽器的支援度問題的話,我是覺得可以用整個版面的 layout 是固定寬度還是自動寬度來決定用那個方法比較好,如果版面是固定寬度的話比較適合用 css-table,反之則是用 inline block。

comments powered by Disqus