各大網站的 CSS 布局對行級元素是不是有些濫用？

01-14

好多大網站，豆瓣，騰訊微博等，我看了下，經常把a,strong,span等行級元素浮動起來，或display:block，這是正統的做法呢，還是也算hack技巧呀。
總感覺行級元素浮動或設置了高寬，很彆扭，還有一些布局是a裡面套著h2的，這些值得模仿嗎？

其實從現在的理論來說，並不存在「塊級元素」或者「行級元素」，block/inline等只是CSS性質。HTML定義了每個元素的語義，並且根據語義有建議的默認樣式，但是不代表它必須如此。所以將a等設定為display:block或者設置寬高等並沒有什麼問題。至於說a裡面包含h2，標準現在允許這種做法，因為確實有將整段都變成鏈接的做法（好不好另說了）。技術上沒有問題，但是需要根據你的需求來判斷是否應該如此設計。

看例子，比如要把一個 a 模擬成按鈕的樣式，從性能考慮肯定是用 CSS 最優，但是呢，因為 inline 自身特性的問題，是沒辦法完美地模擬按鈕，因此 inline-block 出現了。

但是由於 IE7- 的 inline-block 都是 buggy，IE6 是直接不能用，所以用上了 block、float 來模擬出對應的效果。

另外，HTML 和 CSS 的語義是不一樣的，行內元素並不是指「樣式」上是行內，是指結構上、語義上是行內，比如 span &> p 是錯誤的。

HTML 的元素規範，是為了讓在沒有 CSS/JS 的情況下，頁面內容能正確地呈現出來，特別是針對殘障人士的屏幕閱讀器，article &> p &> a 會被閱讀器識別為此篇文章內某一段文章的某些文字是鏈接。

而 CSS 是針對樣式，針對可閱讀 CSS 的設備做的樣式調整，理論上它的任何行為都不該影響頁面的內容。比如 content: counter() 雖然會在頁面產生內容，但是，緊記，即使頁面缺少了 CSS，對應的語義也不會變成殘缺。

http://jsbin.com/asowon/edit#html,live(Chrome/Firefox/Safari/...)

在上面的例子里，即使沒了 CSS，& 自身的語義也很好地詮釋了它是一個有序列表，而且由於是塊元素，閱讀器也可以很清晰地知道每一個 & 都是獨立的（plane 是一個獨立元素，car 也是）。

而行內元素，它就是和兄弟節點有聯繫的。

HTML5設計原則中有兩點說明：

1、解決實際問題。
2、用戶怎麼使用的，就怎麼設計規範。

a,strong,span 本意是行級元素（內聯元素），但實際情況中一塊區域比如一段鏈接文本所佔據的寬高空間需要作為一個鏈接塊出現，這只是元素樣式改變不涉及元素語義。這應該也是 display:inline-block 這類屬性出現的原因。

參考：

《HTML5設計原理-Jeremy Keith在 Fronteers 2010 上的主題演講》

http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

《HTML5設計原則》

W3C官方：http://www.w3.org/TR/html-design-principles/

HTML5研究小組：http://www.mhtml5.com/2011/04/1077.html

使用何種html元素，是完全根據語義來定的，而inline元素是否display改變為block，是否浮動，這是布局和樣式決定的，兩者並不存在關聯。

因此可以說這些網站的做法只要符合語義就是沒有問題的，當然，a標籤嵌入h2，我是想不出符合語義的應用場景，一般難道不是h2里嵌入a標籤嘛，或者符合html5的做法，使用hgroup

1. 行級元素通過css浮動起來、display為block等等手段擁有和塊級元素一樣的效果，是完全可行的。此時只是在表現上像塊級元素而已，不影響該標籤本身的語義的，如果你表現上有需要，可以放心這樣用，這是對css應用的一個很正面的例子（html代碼要有語義，表現的就交給CSS）。

2. 不算hack。css hack在我的理解上，是指針對各瀏覽器（或各瀏覽器不同版本）對css支持程度的不同而導致同樣的css代碼不同的瀏覽器上的顯示效果不符合預期目標，需要進一步利用各種技巧讓各個瀏覽器實現符合目標顯示效果的過程。css hack往往用在比如IE6解析css的各種bug上面。

3. a裡面嵌套h2是不符合規範的做法（行級元素不能包含塊級元素），當然你這樣用了瀏覽器也能正常顯示，不過基於嚴格律己的考慮，建議不要模範這種做法。也不必要迷信大網站。大網站很多可以參考的地方，但不一定每個細節都會處理得很好。

a作為box用一點問題都沒有，我一向如此

至於用行元素套塊元素就不是很推薦了

有些時候不是前端說的算，設計要求，必須這麼做才能實現效果，被迫啊

a裡面套h2，在我們這裡不允許，至於把a顯示block，這個根據需求

如果還在CSS的使用上去追求語義就有些蛋疼了，除非你讓用戶不使用低版本的IE。

在HTML標籤使用時遵循語義就好了。

根據實際問題來選解決方案吧。