Is the tag li a block-level element analysis_HTML/Xhtml_Web page production

WBOY
Release: 2016-05-16 16:41:19
Original
1625 people have browsed it

Why can it set the height, but unlike the

elements, it feels like it is a "semi-inline" (inline: inline[text]-level) element. HTML 4 is described like this:

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

This description seems to be saying that <li /> is a "semi-inline" element. Of course, elements similar to <td /> in this list also gave me such doubts. Today I took a look at the default CSS of each browser. The result is this:

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

Here, it’s basically clear. In A-Grade browsers other than IE6/7, it is a "semi-inline" element. When it comes to display:list-item;, in fact, even though all A-Grade browsers now support it, not many people use it. Why? In fact, it is of no use. In Quirks Mode, PPK says this:

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. In fact, this does not mean much. But it can be regarded as solving one of my doubts. Share it. If you also have such doubts, maybe if a bug or other question arises next time when coding, you will probably be able to respond quickly.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template