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>
This UL in the different browser's display basically is similar. So let's set, CSS try to look at IE and FF where different:
CSS Code
UL {background: #ddd; padding:0;}
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;}
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;}
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;}
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!
This post in the classic forum released, a friend asked such a question: "The Li's float property set to left, the front of the preset mark in IE will disappear, and in the FF is normal, when ie the preset mark where to hide it?" "Here's an explanation of this:
Where did the marker go? This is IE on this preset mark level, in IE, this preset mark and content is not on the same level, when the UL was set to Float:left; when he was hidden under the margin and border, perhaps you do not believe, but this is the truth. Look at the following two examples:
Missing preset tags in IE:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<title></title>
<style type= "Text/css" >
/*<! [cdata[*/
UL {background: #ddd; margin:0 0 0 30px; border:30px solid #aaa; Float:left;}
/*]]>*/
</style>
<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> 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>
<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>
</body>
The preset label pulled out by padding
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<title></title>
<style type= "Text/css" >
/*<! [cdata[*/
UL {background: #ddd; margin:0 0 0 30px; padding:0 0 0 30px; border:30px solid #aaa; Float:left;}
/*]]>*/
</style>
<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> 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>
<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>
</body>
From this we can infer that IE is to explain: In the UL has the attribute of Float:left, the preset mark hierarchy should be under margin and border, above padding. In FF, the preset mark is higher than margin,border,padding with the content.
As for Li, after setting the Float:left, why does IE not see the preset mark? I think it might be related to the level of the display. But I do not have some evidence to prove the true cause of this phenomenon!
