List UL or ol have a preset mark, this mark may be a real dot dot, or it may be a number. In practical applications, we need to get rid of this preset tag, but we don't know where the preset tag is. Because IE and FF seem to deal with the UL preset tags have a different way: We write a UL HTML code structure:
HTML structure:
<ul>
<li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li>
<li> Zhou's stance triggers dollar shock | RMB should become a currency?</li>
<li> Airport a Hong Kong passenger bomb threat leads to flight delays </li>
<li> US housing "Trouble" unfinished | Detroit house cheaper than car </li>
<li> Network Report: The United States is a hacker stronghold, China is the largest injured country </li>
</ul>
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/>" and similarities and differences of UL preset mark under IE </title></pead><body><ul> <li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li> <li> Zhou's statement triggers dollar shock | RMB to be a currency?</li> <li> Capital Airport a Hong Kong passenger bomb threat causes flight delays </li> <li> US housing "Trouble" unfinished | Detroit house cheaper than car < /li> <li> Network Report: The United States is a hacker stronghold China is the largest injured country </li> </ul> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
This UL in the different browser's display basically is similar. So let's set CSS and try to see what's different about IE and FF:
CSS code:
UL {background: #ddd; padding:0;}
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/>" and similarities and differences of UL preset mark under IE </title> <style type= "Text/css" >/*<! [cdata[*/ul {background: #ddd; padding:0;} /*]]>*/</style></pead><body><ul> <li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li> <li > Zhou's stance triggers dollar shock | RMB should become a currency?</li> <li> Capital Airport a Hong Kong passenger bomb threat causes flight delays </li> <li> US housing market "Trouble" | Detroit house is cheaper than a car </li> <li> Network Report: The United States is a hacker stronghold China is the largest injured country </li> </ul> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Now only set the value of padding to 0, then we look at IE in addition to a number of backgrounds and no changes, but the default in FF is missing! Notice here that the preset tags in IE are outside the background. Let's go another way to set up:
CSS code:
UL {background: #ddd; margin:0;}
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/>" and similarities and differences of UL preset mark under IE </title> <style type= "Text/css" >/*<! [cdata[*/ul {background: #ddd; margin:0;} /*]]>*/</style></pead><body><ul> <li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li> <li > Zhou's stance triggers dollar shock | RMB should become a currency?</li> <li> Capital Airport a Hong Kong passenger bomb threat causes flight delays </li> <li> US housing market "Trouble" | Detroit house is cheaper than a car </li> <li> Network Report: The United States is a hacker stronghold China is the largest injured country </li> </ul> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Here we look again, in contrast, IE's preset tag is missing, and the preset tag in FF is still in place, notice here that the preset mark in FF is in the background. Of course, we do not understand a bit here, in the end what is this? Where exactly is this preset mark? Below we have an example to see where the UL preset mark is!
HTML structure:
<ul>
<li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li>
<li> Zhou's stance triggers dollar shock | RMB should become a currency?</li>
<li> Airport a Hong Kong passenger bomb threat leads to flight delays </li>
<li> US housing "Trouble" unfinished | Detroit house cheaper than car </li>
<li> Network Report: The United States is a hacker stronghold, China is the largest injured country </li>
</ul>
CSS code:
UL {background: #ddd; padding:100px; margin:100px; border:100px solid #eee;}
Li {background: #aaa;}
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/>" and similarities and differences of UL preset mark under IE </title> <style type= "Text/css" >/*<! [cdata[*/ul {background: #ddd; padding:100px; margin:100px; border:100px solid #eee;} Li {background: #aaa}/*]]>*/</style></pead><body><ul> <li> Ministry of Construction reported eight cases of illegal and irregular property transactions </li> <li> Zhou's stance triggers dollar shock | RMB should become a currency?</li> <li> Capital Airport a Hong Kong passenger bomb threat causes flight delays </li> <li> US housing market "Trouble" | Detroit House cheaper than car </li> <li> Network report: US is a hacker stronghold China is the biggest victim of the country </li> </ul> </body></ptml></ textarea> </p>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
At this point, we see that the margin area is the outermost part of the white, a bit gray is border, and then into a deeper gray, the area is padding, the deepest area is the content area. And the preset tag is in the padding area, so does it mean that removing the padding area from the preset tag will disappear? We modify the CSS:
CSS code:
UL {background: #ddd; padding:0; margin:100px; border:100px solid #eee;}
Li {background: #aaa;}
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/>" and similarities and differences of UL preset mark under IE </title> <style type= "Text/css" >/*<! [cdata[*/ul {background: #ddd; padding:0; margin:100px; border:100px solid #eee;} Li {background: #aaa;} /*]]>*/</style></pead><body><ul> <li> Ministry of Construction reported eight cases of illegal property transactions, violations of the typical case </li> <li > Zhou's stance triggers dollar shock | RMB should become a currency?</li> <li> Capital Airport a Hong Kong passenger bomb threat causes flight delays </li> <li> US housing market "Trouble" | Detroit house is cheaper than a car </li> <li> Network Report: The United States is a hacker stronghold China is the largest injured country </li> </ul> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
We set the padding to 0 and found that the preset mark was still there, but then he was on top of the border, so we can infer from the above that the preset mark does not exist in margin,padding or border, margin, Padding and border simply provide a space for the preset tag to exist and display. And this preset marker floats on top of margin,padding and border.
Then we generally may have understood, in fact, IE and FF for the default value of the UL is not the same, IE gave UL a margin value, but did not give padding value, so ie in the UL preset Mark Point is in the background. The FF instead gives a padding value but does not give the margin value, so the UL preset Mark Point in FF is in the background. However, according to the above example, we know that this preset mark point does not belong to Paading and does not belong to margin. He's only part of the content, and he's always on the outside edge of the content, and of course we can set it in the inner edge of the content through CSS. Basic methods Please consult the CSS2 Chinese manual
It is clear from the above example that you want this preset mark to disappear with margin:0 and padding:0, because if the border width reaches a certain value, the preset mark will appear. So the correct formulation is: margin:0; padding:0; List-style:none;
Although the preset mark is very good, but there is no way to accurately control, so in the actual application is not recommended, or use the background map to replace!
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
