標籤li 是不是塊級元素分析

為什麼它可以設定高度，但又不像<h1 /> 這些元素，那種感覺就像它是個半內聯的（內聯：inline[text]-level）元素。 HTML 4是這樣描述的：

The following elements may also be considered block-level elements since they may contain block-level elements:

• DD – Definition description
• DT – Definition term
• FRAMESET – Frameset
• LI – List item
• TBODY – Table body
• TD – Table data cell
• TFOOT – Table foot
• TH – Table header cell
• THEAD – Table head
• TR – Table row

這段描述中，似乎也是在說， <li />就是一個半內聯的元素。當然，這個列表裡面的類似於<td />這些元素，也曾給我帶來這樣的疑惑。今天看了一下各瀏覽器的默認CSS。結果是這樣的：

在這裡，也基本上明了了。在除IE6/7 以外的A-Grade 瀏覽器中，就是一個半內聯的元素。提到display:list-item; ，其實，即使現在所有的A-Grade 瀏覽器都支持，用的人其實不多。為什麼？其實就是沒什麼用。在Quirks Mode，PPK 是這樣說的：

display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI 's in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI 's).

Live example:display: blockdisplay: list-itemdisplay: list-item

Right。其實這個意義不大。但也算是解了自己的一個疑惑。分享出來，如果你也有這樣的疑惑，或許下次Coding 的時候出現Bug 或者其他疑問，估計也就能很快反應過來了。