In-depth understanding of list-style in CSS

Let's take a look at the CSS manual for the list-style explanation.

Definition and usage
The List-style shorthand property sets all the list properties in a declaration.

Description
This property is a shorthand property that covers all the other list style properties. Since it is applied to all display-list-item elements, it can be used only in normal HTML and XHTML in the LI element, but in fact it applies to any element and is inherited by the List-item element.
The following properties can be set sequentially:
List-style-type
list-style-position
List-style-image
You can not set one of these values, such as "list-style:circle inside;" is also allowed. Properties that are not set use their default values.
Default value: Disc outside None

In daily work, CSS Reset is often required for ul,li, and the list symbol is hidden.
The most commonly used notation is ul,li,ol{list-style:none;} (Others use Ul,li,ol{list-style-type:none;})

Run the Code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
This page is not a problem in ie6,7,8,ff.

But what we can't ignore is that List-style: contains three properties:

List-style-type
List-style-position
List-style-img

If you don't pay attention to these three attributes, List-style sometimes comes out of mischief.

For example, when the UL, floating, need display:inline to solve the double margin problem in IE6, strange things happen:

Run the Code box

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
. Ul01{float:left;display:inline;}
. Ul01,.ul01 Li{list-style:none;}

The above page is still normal in ie8,ff
But in the ie6,7, the UL inside and Li produced a distance.
Thus, when we define list-style:none, even though the list symbol does not appear, in ie6,7, it still has its place.
See what properties this UL has in FF.


The diagram shows that when list-style:none is defined in CSS, it has no effect on list-style-position and is still the default setting for the FF browser, with a value of outside
And ie6,7 is probably the default list-style-position:inside
In order to confirm this, I changed list-style:none to List-style:none inside none and tested it again.

Run the Code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
After the operation can be found, in the ie6,7, and the performance of List-style:none is identical.
So I guess in ie6,7 when UL has Float:left and Display:inline attributes, set the List-style:none, then List-style-position is also the default inside;

So I came to the conclusion that
Under ie6,7, when UL does not have float:left;display:inline;
Whether or not list-style:none this attribute, the list character is hidden, not occupying the position (5,6 in the code below)
When UL has float:left;display:inline;
List-style:none, the list character is hidden but still has a location (list-style-position:inside);(the UL1,UL3 in the code below)
List-style:none is not set, list breaks are hidden, and no placeholder (list-style-position:outside) (Code UL4)

UL02 is ideal for each browser that participates in the test

The last piece of code compares the performance of list-style in various situations, paying particular attention to the performance of 4,5,6 under ie6,7.

Run the Code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 Through the comparison of the above code performance results, I think: 
 in Firefox as long as List-style-type is none, whether the value of list-stype-position is outside or inside, List-style can be very well hidden 
 and in ie6,7, setting only List-style:none is not enough to solve all the problems 
 so I think in CSS reset when using List-style:none outside none Better