标识 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 /> 便是1个"半内联"的元素。自然,这个目录里边的相近于 <td /> 这些元素,也曾给我带来这样的疑虑。今日看了1下各访问器的默认设置CSS。結果是这样的:

Browsers CSS IE6/IE7 li{display:block;} IE8+ / Webkit / Firefox / Opera li{display:list-item;}

在这里,也基础上明了了。在除 IE6/7 之外的 A-Grade 访问器中,便是1个"半内联"的元素。提到 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: block

display: list-item
display: list-item

Right。实际上这个实际意义不大。但也算是解了自身的1个疑虑。共享出来,假如你也是有这样的疑虑,也许下一次 Coding 的情况下出現 Bug 或别的疑惑,估算也就可以很快反映过来了。