list-style:none in css reset

Author：Eve Cole Update Time：2010-05-22 15:52:43

It turns out that I once encountered some abnormal behavior in the UL list at work.
In addition, I saw the post http://bbs.blueidea.com/thread-2984871-1-1.html yesterday, so I tested various attributes of list-style and discovered an interesting phenomenon.

Let’s take a look at the explanation of list-style in the CSS manual first.

Definition and usage
The list-style shorthand attribute sets all list properties in one declaration.

illustrate
This property is a shorthand property that covers all other list style properties. Since it applies to all elements with a list-item display, it can only be used on li elements in normal HTML and XHTML, but in fact it can be applied to any element and is inherited by the list-item element.
The following properties can be set in order:
•list-style-type
•list-style-position
•list-style-image
It is not necessary to set one of the values. For example, "list-style:circle inside;" is also allowed. Properties that are not set use their default values.
Default value: disc outside none

In daily work, it is often necessary to perform css reset on ul and li to hide the list symbols.
The most commonly used way of writing is Ul,li,ol{list-style:none;} (some people also use ul,li,ol{list-style-type:none;})

There is no problem with this page in IE6, 7, 8, and FF.

But what we cannot ignore is that list-style: contains three attributes:

list-style-type
list-style-position
list-style-img

If you don't pay attention to these three attributes, list-style will sometimes cause trouble.

For example, when ul, after floating, needs display:inline to solve the double margin problem in IE6, something strange happens:

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

The above page is still normal in IE8 and ff, but in IE6 and 7, there is a distance between the inside of ul and li.
It can be seen that when we define list-style:none, although the list symbol does not appear, its position is still left in IE6 and 7.
See what attributes this UL has in FF

As can be seen from the picture, when list-style:none is defined in css, it has no effect on list-style-position. It is still the default setting of FF browser, and the value is outside.
In IE6 and 7, list-style-position: inside is likely to be the default
To confirm this, I changed list-style:none to list-style:none inside none and tested it again

After running it, you can find that in IE6 and 7, it behaves exactly the same as list-style:none.
So I speculate that in IE6 and 7, when UL has float:left and display:inline attributes and list-style:none is set, list-style-position also defaults to inside;

So the conclusion I came to is that under IE6 and 7, when UL does not have float:left;display:inline;:
Regardless of whether there is the attribute list-style:none, the list symbols are hidden and do not occupy space (5, 6 in the code below)
When UL has float:left;display:inline; attribute
list-style:none, the list symbol is hidden, but the position is still left (list-style-position:inside); (UL1, ul3 in the code below)
list-style:none is not set; the list character is hidden and does not occupy a position (list-style-position:outside) (code UL4)

UL02 performed relatively well in all browsers participating in the test.

This last piece of code compares the performance of list-style under various circumstances, especially the performance of 4, 5, and 6 under IE6 and 7.

Run code box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>list-style: none or list-style:none outside none;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :bold 16px/180% arial;} div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px; margin:4px 0 0 15px;background:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{list-style:none outside none;} .ul03,.ul03 li{list-style:none inside none;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; list-style:none; </p> <ul class="ul01"> <li><a href="#">Pure words, strange dreams and rushing thoughts</a></li> <li><a href="#" >Just like love, the requirement is almost perfect</a></li> <li><a href="#">The faint youthful and innocent boys and girls on campus</a></li> <li> <a href="#">I am hesitant and hesitant, and I have long lost the sense of distance</a></li> <li><a href="#">Looking at her face and reciting familiar and unfamiliar words Verses</a></li> <li><a href="#">Those words perfectly describe the spirit of a girl</a></li> <li><a href="#"> Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href="#">The delicate and sincere feelings gradually emerge and become immersive</a></li> <li ><a href="#">High-density emotions ferment repeatedly in the text</a></li> </ul> </div> <div> <p>2:float:left;display:inline; list-style:none outside none;</p> <ul class="ul02"> <li><a href="#">Pure words, strange dreams and rushing thoughts</a></li> <li ><a href="#">Just like love, the requirement is almost perfect</a></li> <li><a href="#">The faint youthful and innocent boys and girls on campus</a ></li> <li><a href="#">I am so hesitant that I no longer feel the distance</a></li> <li><a href="#">Looking at her The face recited familiar yet unfamiliar verses</a></li> <li><a href="#">Those words perfectly describe the spirit of a girl</a></li> <li> <a href="#">Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href="#">The delicate and sincere feelings gradually become immersive</a> a></li> <li><a href="#">High-density emotions ferment repeatedly in the text</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none inside none;</p> <ul class="ul03"> <li><a href="#">Pure words, strange dreams, rushing thoughts</p> a></li> <li><a href="#">Just like love, the requirement is almost perfect</a></li> <li><a href="#">Light on campus Youthful and innocent boys and girls</a></li> <li><a href="#">I am hesitant and hesitant, and I have long lost the sense of distance</a></li> <li><a href= "#">Looking at her face and reciting familiar yet unfamiliar verses</a></li> <li><a href="#">Those words perfectly describe a girl’s soul</a ></li> <li><a href="#">Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href="#">The delicate and sincere feelings gradually Highlighted and immersive</a></li> <li><a href="#">High-density emotions ferment repeatedly in the text</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css reset</p> <ul class="ul04"> <li><a href="#">Pure text, strange dreamy galloping Thoughts</a></li> <li><a href="#">Just like love, the requirement is almost perfect</a></li> <li><a href="#"> The faint youthful and innocent boys and girls on campus</a></li> <li><a href="#">I am hesitant and hesitant, and I no longer feel the sense of distance</a></li> <li> <a href="#">Looking at her face and reciting familiar yet unfamiliar verses</a></li> <li><a href="#">Those words perfectly describe a girl’s Spirit</a></li> <li><a href="#">Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href="#">Delicate and delicate The sincere feelings gradually emerge and become immersive</a></li> <li><a href="#">High-density emotions ferment repeatedly in the text</a></li> </ul> </div> <div> <p>5: No display, float attribute list-style is none;</p> <ul class="ul05"> <li><a href="#">Pure text is strange Dreamy and rushing thoughts</a></li> <li><a href="#">Just like love, the requirement is almost perfect</a></li> <li><a href=" #">The faint youthful and innocent boys and girls in the campus</a></li> <li><a href="#">I am hesitant and hesitant, and I have long lost the sense of distance</a></li> <li><a href="#">Looking at her face and reciting familiar yet unfamiliar verses</a></li> <li><a href="#">Those words exactly describe a Girl's Soul</a></li> <li><a href="#">Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href="#" >Delicate and sincere feelings gradually emerge and become immersive</a></li> <li><a href="#">High-density emotions ferment repeatedly in the text</a></li> < /ul> </div> <div> <p>6: No display, no float attribute list-style:none;</p> <ul class="ul06"> <li><a href="#"> Pure words, strange dreams and rushing thoughts</a></li> <li><a href="#">Just like love, the requirement is almost perfect</a></li> <li>< a href="#">The faint youthful and innocent boys and girls on campus</a></li> <li><a href="#">I am hesitant and hesitant, and I have long lost the sense of distance</a> </li> <li><a href="#">Looking at her face and reciting familiar yet unfamiliar verses</a></li> <li><a href="#">Those words are just right It perfectly describes a girl’s soul</a></li> <li><a href="#">Interlaced light and dark clues and uncertain protagonists</a></li> <li><a href ="#">Delicate and sincere feelings gradually emerge and become immersive</a></li> <li><a href="#">High-density emotions ferment repeatedly in the text</a>< /li> </ul> </div> </body> </html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]

By comparing the performance results of the above code, I think:
In Firefox, as long as list-style-type is none, no matter the value of list-stype-position is outside or inside, list-style can be well hidden. In IE6 and 7, only list-style:none is set. , is not enough to solve all problems, so I think it is better to use list-style:none outside none when css reset