|
1. z-index is invalid in IE6.
In CSS, the z-index property is used to change the hierarchy. For z-index to work, there is a prerequisite, that is, the position attribute of the element must be relative, absolute or fixed.
The higher the z-index level, the more the content should be displayed on top. In most browsers and in most cases, this is true, but not always, especially in IE6.
1. Some necessary explanations about the effect screenshots. The following are not nonsense, but are to make it easier to understand the content of my speech.
The general context for all the result screenshots below is as follows:
1. What is fixed and unchanging on the page is an absolute positioning layer with a black background, a transparency of 40%, and a level of 1 that displays almost the entire screen. The HTML is:
<div></div>
The corresponding CSS is: #blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
The purpose is to make the hierarchical relationship clear at a glance. look:
This means that the content is below the absolutely positioned layer with a z-index of 1.
This means that the content is above the absolutely positioned layer with a z-index of 1.
2. The pictures on the page are for comparison. It is easy to tell whether the pictures are above or below the translucent black absolute positioning layer. In this way, you can have a very intuitive understanding of what I said about the z-index not working.
2. IE6's complaint: Floating makes me sink. Now let's really talk about the problem, its cause and how to solve it. First, let’s talk about the first situation where z-index has no effect no matter how high it is set. There are three conditions for this to happen: 1. The parent tag's position attribute is relative; 2. The question tag has no position attribute (excluding static); 3. The question tag contains a float attribute.
You can use the following code to do a simple test yourself:
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="upload/2022/web/mm2.jpg" />
</div>
Damn, the z-index is 9999, which is high enough, but look at the picture below:
This comparison reveals the problem. Some people may wonder whether it is IE6's relative that has caught a cold, rather than float carrying the "H1N1 virus". OK, I will remove the float now, the HTML code is as follows:
<div></div>
<div style="position:relative; z-index:9999;">
<img src="upload/2022/web/mm2.jpg" />
</div>
Results in IE6:
I think the problem should be clear. As for the cause, I initially thought it was caused by haslayout. Later, I tested it with zoom and found that it was not (the lack of this bug under IE7 also proved that it was not caused by haslayout). It seems that this float will make z-index invalid. Since changing the position:relative attribute of the outer div to absolute can solve this problem, I wonder if float has caused some changes in relative. Float and relative are close relatives in horizontal positioning. Could it be that the "deformity" and "weakness" appear because the two are mixed together? This is just my guess. The real reason should be asked to IE6's stepmother.
There are three solutions: 1. Change position:relative to position:absolute; 2. Remove floating; 3. Add position attributes to floating elements (such as relative, absolute, etc.).
3. Stubborn IE6: It only recognizes the first father. Many people may know that under IE6, the level of the hierarchy depends not only on itself, but also on whether its father’s background is strong enough. The specific terminology is:
When the position attribute of the parent tag is relative or absolute, the absolute attribute of the child tag is relative to the parent tag. In IE6, the hierarchy is sometimes not determined by the z-index of the child tags, but by the z-index of their parent tags.
Anyone with some experience may know the above facts. However, I believe that many people here don’t know that in IE6, what determines the level is not the current parent tag, but the parent tag of the first relative attribute of the entire DOM tree (node tree). Sometimes we usually deal with one more parent tag, and it is rare to have multiple and complex z-index levels, so it is inevitable that there will be slight deviations in understanding.
OK, let's show you the bug.
The condition is very simple, as long as the relative property of the first father of the absolutely positioned first element, or the oldest father-level person, is less than the z-index level of the black translucent layer. For example, the following HTML code:
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
It can be seen that the parent tag div of the mm3 image is absolutely positioned, with a level of 9999, which is much larger than 1. The parent tag level of the absolutely positioned div is 1000 (the same is true for 10000), which is also much larger than the z-index:1 of the black semi-transparent layer. However, our poor IE6 kids——
Let’s take a look at other apps represented by Firefox:
IE7 and IE6 have the same bug. The reason is very simple. Although the father level of the div where the picture is located is very high (1000), the father's father is useless. It's a pity that such a strong child like 9999 will never have a chance to succeed!
Knowing the reason, the solution is easy. The HTML code after adding z-index to the first father is as follows:
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
As a result, IE6 kids are all happy and cheerful:
2. list-style:none in CSS reset
In daily work, we often need to perform CSS reset on ul and li to hide the list symbol. The most common way to write it is Ul,li,ol{list-style:none;} (some people also use ul,li,ol{list-style-type:none;})
<!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" />
<meta content="fanfan,[email protected]" />
<title>Common Usage</title>
<style>
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>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul>
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
</body>
</html>
This page has no problem in IE6, 7, 8, FF.
But we can't ignore that list-style: contains three attributes: list-style-type, list-style-position, list-style-img
If you don't pay attention to these three properties, list-style will sometimes cause trouble. For example, when ul is floated and needs display:inline to solve the double margin problem in IE6, strange things happen:
<!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" />
<meta content="fanfan,[email protected]" />
<title>Something strange happened</title>
<style>
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>
</head>
<body>
<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
</body>
</html>
.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 inner side of ul and li.
It can be seen that after we define list-style:none, although the list symbol does not appear, it still has its place in IE6 and 7.
Let's see what properties this UL has in FF
As can be seen from the figure, when list-style:none is defined in CSS, it has no effect on list-style-position, which is still the default setting of FF browser, with a value of outside.
In IE6 and 7, the default list-style-position: inside is likely
To confirm this, I changed list-style:none to list-style:none inside none and tested it again.
<!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" />
<meta content="fanfan,[email protected]" />
<title>Forced inside</title>
<style>
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>
</head>
<body>
<div>
<p>Force inside list-style:none inside none;</p>
<ul>
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
</body>
</html>
After running, we can find that in IE6 and 7, the performance is exactly the same as list-style:none.
So I guess that in IE6 and 7, when UL has the properties of float:left and display:inline, and list-style:none is set, list-style-position will also default to inside;
So the conclusion I came to is that in IE6,7, when UL does not have float:left;display:inline;:
Regardless of whether the list-style:none attribute is used or not, the list symbol is hidden and does not occupy any position (5, 6 in the code below).
When UL has float:left;display:inline; properties
list-style:none, the list symbol is hidden, but there is still a position (list-style-position:inside); (UL1, ul3 in the code below)
list-style:none is not set; the list symbol is hidden and does not occupy a place (list-style-position:outside) (code UL4)
UL02 performs well in all the browsers tested. The last code compares the performance of list-style in various cases, especially the performance of 4, 5, and 6 in IE6 and 7.
<!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>
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 surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</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 surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</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, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;no css reset</p>
<ul class="ul04">
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
<div>
<p>5: No display, float attribute list-style is none;</p>
<ul class="ul05">
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
<div>
<p>6: No display, float attribute no list-style:none;</p>
<ul class="ul06">
<li><a href="#">Pure words, strange dreams, and surging thoughts</a></li>
<li><a href="#">Just like love, it requires near perfection</a></li>
<li><a href="#">The innocent boys and girls in the campus</a></li>
</ul>
</div>
</body>
</html>
By comparing the results of the above code, I think:
In Firefox, as long as list-style-type is none, list-style can be hidden well regardless of list-stype-position value is outside or inside. In IE6 and 7, setting list-style:none alone is not enough to solve all problems. So I think it is better to use list-style:none outside none when resetting CSS. 3. CSS forces no line break. In a ul with a specified width, I define the width of li as automatic. Try to make li automatically align to the left according to the content length.
For example, there are 4 li in the ul with a width of 210px. The widths of these 4 li are 80px, 120px, 140px, and 80px according to their own content lengths.
The effect I need is that the 4 li are automatically arranged to the left. When the sum of the lengths of the third li and the first two li is greater than the width of ul, the third li will move down one line. Displayed on the second line. Instead of making ul wider or taller (content wrapping, height increase)
The width of ul is defined as 210px and the width of li is defined as automatic. The results are:
ul is not stretched, and unfortunately li does not automatically move to the next position. Instead, the content wraps to make the li higher. Then he shamelessly squeezed into the first row. .
After careful consideration, I think the problem lies in the line break of the content inside li. So I looked for the CSS property that prohibits line breaks.
Solution:
Add white-space:nowrap attribute to li to force no line break.
|
