The original work has met the UL list of some abnormal performance,
Plus yesterday saw the http://bbs.blueidea.com/thread-2984871-1-1.html this post, so test the list-style of various properties, found an interesting phenomenon
Take a look at the CSS manual, the explanation for List-style
Definitions and usage
The List-style property sets all the list properties in a declaration.
Description
This property is a shorthand property that covers all other list-style properties. Because it applies to all the elements that display as List-item, it can only be used in plain HTML and XHTML for Li elements, but in fact it could be applied to any element and inherited by the List-item element.
You can set the following properties in order:
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 the daily work often need to Ul,li CSS Reset, the list symbol to hide.
The most commonly used wording is ul,li,ol{list-style:none. (also someone uses ul,li,ol{list-style-type:none;})
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <meta name= Author" content= "fanfan,xiangrui09@qq.com"/> <title> common usage </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-right:10px;} P Span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;} ul,li{list-style:none;} </style> </pead> <body> <div> <p>1:list-style:none;</p> <ul> <li> <a href= "#" > Pure text singular dream Pentium thought </a></li> <li><a href= "#" > It's like a love request is almost perfect </a></ Li> <li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I wander and wander long ago no distanceFrom the sense </a></li> <li><a href= "#" > gazed at her face and recited familiar and unfamiliar verses </a></li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li><a href= "#" > Interleaved with dark leads and uncertain protagonist </a></li> <li><a href= "#" > exquisite and sincere feelings gradually highlighted the immersive </a></li> <li><a href= "#" > High density of emotion in the words of repeated fermentation </a></li> </ul> </div> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
There is nothing wrong with this page in Ie6,7,8,ff.
But what we can't 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 sometimes comes out of mischief.
For example, when the UL, floating, need display:inline to solve the double margin problem in the IE6, strange things happen:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <meta name= Author" content= "fanfan,xiangrui09@qq.com"/> <title> strange thing happened </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-right:10px;} P Span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua; Ul01{float:left;display: inline;} . ul01,.ul01 Li{list-style:none;} </style> </pead> <body> <div> <p>1:list-style:none; </p> <ul class= "ul01" > <li><a href= "#" > Pure writing the idea of a singular dream Pentium </a></li> <li><a href= "#" > is like a love for the same requirement is almost perfect </a></li> <li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I wander and wander long without the sense of distance </a></li> <li><a href= "#" > Staring at her face reciting familiar and unfamiliar verses </a></li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li ><a href= "#" > Staggered to appear dark clues and uncertain protagonist </a></li> <li><a href= "#" > Delicate and sincere feelings gradually highlight the immersive </a ></li> <li><a href= "#" > High density of emotions in the text of the repeated fermentation </a></li> </ul> </div> </body > </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
. Ul01{float:left;display:inline;}
. Ul01,.ul01 Li{list-style:none;}
The page above is still normal in ie8,ff
But in the ie6,7, the UL inside and Li produced the distance.
This shows that when we define list-style:none, even though the list character does not appear, it still has its place in the ie6,7.
Look at what this UL owns in FF.
As you can see on the diagram, when you define List-style:none in CSS, it has no effect on list-style-position, it is still the default setting for FF browser, the value is outside
And ie6,7 is probably the default list-style-position:inside
To confirm this, I switched the list-style:none to List-style:none inside none and tested it again.
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <meta name= Author" content= "fanfan,xiangrui09@qq.com"/> <title> forced Inside</title > <style type= "text/css" > Body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font:bold 16px/180% Arial; div {background: #eee; margin-right:10px;} P Span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none; </style> </pead> <body> <div> <p> forced inside list-style:none inside None;</p> <ul > <li><a href= "#" > Pure text The fantastic Pentium idea </a></li> <li><a href= "#" > is almost perfect as it is for love. </a></li> <li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I wander and wander and I've lost my distanceSense </a></li> <li><a href= "#" > gazed at her face and recited familiar and unfamiliar verses </a></li> <li><a href= " # "> Those words aptly describe a girl's spirit </a></li> <li><a href=" # "> Interleaved with dark leads and uncertain protagonist </a></li> <li><a href= "#" > exquisite and sincere feelings gradually highlighted the immersive </a></li> <li><a href= "#" > High density of emotion in the words of repeated fermentation </a></li> </ul> </div> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
After the operation can be found, in ie6,7, and List-style:none performance exactly the same.
So I guess in ie6,7 when UL has float:left and Display:inline attribute, set List-style:none, then list-style-position also default for inside;
So the sum I came up with was
Under the ie6,7, when the UL does not have Float:left;display:inline, when:
Whether or not list-style:none this attribute, the list character is hidden, not occupying the position (5,6 in the following code)
When UL has Float:left;display:inline property
List-style:none, the list character is hidden, but still has a location (list-style-position:inside);(the UL1,UL3 in the following code)
List-style:none is not set; the list character is hidden and not occupied (list-style-position:outside) (Code UL4)
and UL02 in the browser to participate in the test performance is more ideal
This last piece of code contrasts the performance of list-style under various circumstances, paying particular attention to the performance of 4,5,6 under ie6,7
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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 none;} . UL04,.UL04 li{}. ul05{}. ul05,.ul05 li{list-style:none; ul06{ul06,.ul06} </style> </pead> li{ > <div> <p>1:float:left;display:inline; List-style:none;</p> <ul Class= "Ul01" > <li><a href= "#" > Pure text singular fantasy Pentium thought </a></li> <li><a href= "#" > Just like Love. Requirements are near perfect </a></li> <li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I hesitate and hesitation have no sense of distance </a></li> <li><a href= "#" > staring at her face reciting familiar and unfamiliar verses </a></ Li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li><a href= "#" > Staggered light and dark clues and uncertain protagonist </a></li> <li><a href= "#" > Delicate and sincere feelings gradually highlight the immersive </a></li> <li ><a href= "#" > High-density emotions in the words of repeated fermentation </a></li> </ul> </div> <div> <p>2:float: Left;display:inline; List-style:none outside none;</p> <ul class= "ul02" > <li><a href= "#" > Pure text The idea of a singular dream Pentium </a ></li> <li><a href= "#" > Just like Love, it's almost perfect </a></li> <li><a href= "#" > Campus Faint youth simple boy girl </a></li> <li><a href= "#" > I wander and hesitation has no sense of distance </a></li> <li><a href= "#" > gazed at her face reciting familiar and unfamiliar verses </a></li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li><a href= "#" > Interlaced with dark leads and uncertain protagonists </a></li> <li ><a href= "#" > exquisite and sincere feelings gradually highlighted the immersive </a></li> <li><a href= "#" > High density of emotion in the words of repeated fermentation </a ></li> </ul> </div> <div> <p>3:float:left;display:inline;list-style:none inside none;</p> <ul class= "ul03" > <li><a href= "#" > Pure text Fantastic pentium idea </a></li> <li> <a href= "#" > is like a love for the same request is almost perfect </a></li> <li><a href= "#" > Campus Faint Youth simple boy and Girl </a></ Li> <li><a href= "#" > I wander and wander long without the sense of distance </a></li> <li><a href= "#" > Staring her in the face Recite the familiar and unfamiliar verses </a></li> <li><a href= "#" > those words exactly describe a girl's spirit </a></li> <li> <a href= "#" > Interlaced with dark clues and uncertain protagonists </a></li> <li><a href= "#" > Delicate and sincere feelings gradually highlightedImmersive </a></li> <li><a href= "#" > High-density emotions in words repeated fermentation </a></li> </ul> </div> <div> <p>4:float:left;display:inline; did not do CSS reset</p> <ul class= "ul04" > <li><a href= "#" > Pure text singular dream Pentium thought </a></li> <li><a href= "#" > Just like the love requirement is almost perfect </a></li> < Li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I wander and hesitation has no sense of distance </a ></li> <li><a href= "#" > gazed at her face and recited familiar and unfamiliar verses </a></li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li><a href= "#" > Interlaced with dark leads and uncertain protagonists </a></li> <li ><a href= "#" > exquisite and sincere feelings gradually highlighted the immersive </a></li> <li><a href= "#" > High density of emotion in the words of repeated fermentation </a ></li> </ul> </div> <div> <p>5: No display,float attribute list-style to none;</p> <ul class= "Ul05" > <li><a href= "#" > Pure writing the idea of a singular dream Pentium </a></li> <lI><a href= "#" > is like a love for the same requirement is almost perfect </a></li> <li><a href= "#" > Campus faint Youth simple boy girl </a> </li> <li><a href= "#" > I wander and wander long without the sense of distance </a></li> <li><a href= "#" > stares her in the face Recite the familiar and unfamiliar verses </a></li> <li><a href= "#" > those words exactly describe a girl's spirit </a></li> <li> <a href= "#" > Interlaced with dark leads and uncertain protagonists </a></li> <li><a href= "#" > Delicate and sincere feelings gradually highlighted the scene </a> </li> <li><a href= "#" > High density of emotions in words repeated fermentation </a></li> </ul> </div> <div> <p>6: No display,float attribute without list-style:none;</p> <ul class= "ul06" > <li><a href= "#" > Pure text Bizarre dream Pentium thought </a></li> <li><a href= "#" > Just like Love, it's almost perfect. </a></li> <li><a href= "#" > Campus faint Youth simple boy girl </a></li> <li><a href= "#" > I wander and hesitation has no sense of distance </a></li > <li><a href= "#" > gazed at her face and recited familiar and unfamiliar verses </a></li> <li><a href= "#" > Those words aptly describe a girl's spirit </a></li> <li><a href= "#" > Interlaced with dark clues and uncertain protagonists </a></li > <li><a href= "#" > exquisite and sincere feelings gradually highlight the immersive </a></li> <li><a href= "#" > High-density emotions in words repeated fermentation </a></li> </ul> </div> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
By comparing the results of the above code, I think:
As long as List-style-type is none in Firefox, List-style can be well hidden, regardless of the list-stype-position value of outside or inside.
In ie6,7, setting only List-style:none is not enough to solve all problems
So I think it's better to use list-style:none outside none when CSS is reset
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
