Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about the skills that you have to know about web page production. Many people may not know much about it. In order to make you understand better, the editor summed up the following content for you. I hope you can get something according to this article.

1. Z-index is invalid under IE6.

In CSS, to change the level through the z-index attribute, there is a prerequisite for z-index to work, that is, the position attribute of the element should be relative,absolute or fixed.

The higher the z-index level, the more the content should be displayed on it. In most browsers, this is true in most cases, but not absolutely, especially when it comes to IE6.

1. Some necessary instructions on the screenshot of the effect.

The following is not nonsense, but to make it easier to understand the spitting content below.

The screenshots of all the following results have the following background:

1. The page is fixed and immutable, and the one who will not send a luxury house is an absolute positioning layer with a black background, 40% transparency and almost full screen display level 1. The HTML is:

The corresponding CSS is: # blank {width:100%; height:600px; background:black; opacity:0.4; filter:alpha (opacity=40); position:absolute; left:0; top:0; zmuri index 1;}

The function is to make the hierarchical relationship clear at a glance. Look:

This indicates that the content is below the absolute positioning layer with a z-index of 1.

This indicates that the content is above the absolute positioning layer with a z-index of 1.

2. What is compared on the page is the beauty picture, and it is easy to tell whether the picture is above or below the translucent black absolute positioning layer, so that you can have a very intuitive understanding of what I said z-index does not work.

2. IE6's complaint: floating makes me sink

Now begin to really talk about the emergence of the problem, the cause and the solution. First of all, let's talk about the situation where the first z-index doesn't work no matter how high the setting is. There are three conditions for this to happen: 1, the parent tag position attribute is relative;2, the question tag has no position attribute (excluding static); 3, the question tag contains a float attribute.

You can do a simple test yourself with the following code:

Damn it, the z-index is 9999, and the level is high enough, but look at the picture below:

This comparison shows the problem, and some people may wonder if IE6's relative has caught a cold, rather than floating (float) carrying the H1N1 virus. OK, I'll remove the float now, and the HTML code is as follows:

Results under IE6:

I think the problem should be clear. As for the reason, at first I thought it was the fault of haslayout, but later, when I tested it with zoom, I found that it was not (the bug under IE7 also proved to be not the reason for haslayout). It seems that this float will invalidate z-index. Because changing the position:relative attribute of the external div to absolute can solve this problem, I wonder if the float has changed the relative. Float and relative can be said to be close relatives in the horizontal positioning, and whether it is because the two are mixed together that some "deformities" and "sickness" appear. This is just my guess. The real reason is to ask IE6's stepmother.

Solutions: 1, change position:relative to position:absolute;2, remove floats; 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 this IE6, the level depends not only on yourself, but also on whether your father is hard enough in the background. It is specifically described in terms as:

When the parent tag position attribute is relative or absolute, the absolute attribute of the child tag is relative to the parent tag. Under IE6, the performance of the hierarchy sometimes depends not on how high the z-index of the child tag is, but on who has the high and low z-index of their parent tag.

People with some experience may know the above facts. However, I believe that many people do not know that under IE6, it is not the current parent tag that determines the level, but the parent tag of the first relative attribute of the entire DOM tree (node tree). Sometimes we usually deal with a parent tag, z-index levels and complex situations are rare, so it is inevitable that there will be a small deviation in understanding.

OK, let's show this bug.

The condition is simple, as long as the first father of the first element, or the oldest father, has a relative attribute that is smaller than the z-index level of the black translucent layer. For example, the following HTML code:

As you can see, the parent tag div of mm3 images is absolute positioning, level 9999, much larger than 1, and absolute positioning parent tag level 1000 (also the same as 10000), which is also more than black translucent z-index:1, but our poor IE6 children's shoes--

And take a look at other children's shoes represented by Firefox:

IE7 and IE6 have the same bug, the reason is very simple, although the picture of div's current father level is very high (1000), but because the father's father is not useful, poor 9999 of such a strong child did not have the first day ah!

It's easy to know why. The HTML code after adding z-index to the first dad is as follows:

As a result, IE6 children's shoes were smiling and the spring was brilliant:

2. List-style:none in css reset

In daily work, it is often necessary to css reset the ul,li to hide the list symbols. 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;})

Common usage

Body,ul,li,p {padding:0;margin:0;font-size:12px;}

P {font:bold 16pxamp 180% arial;}

Div {float:left;display:inline;background:#eee;margin-right:10px;}

P span {text-decoration:line-through;}

Ul {width:275px;margin:4px 0 015pxbot backgroundwater Aqua;}

Ul,li {list-style:none;}

1: list-style:none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

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 will sometimes come out to make trouble.

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

Something strange happened.

Body,ul,li,p {padding:0;margin:0;font-size:12px;}

P {font:bold 16pxamp 180% arial;}

Div {float:left;display:inline;background:#eee;margin-right:10px;}

P span {text-decoration:line-through;}

Ul {width:275px;margin:4px 0 015pxbot backgroundwater Aqua;}

.ul01 {float:left;display:inline;}

.ul01,. Ul01 li {list-style:none;}

1: list-style:none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

.ul01 {float:left;display:inline;}

.ul01,. Ul01 li {list-style:none;}

The above page is still normal in ie8,ff

But in IE6,7, there is a distance between the inside of ul and li.

Thus, when we define list-style:none, although the list character does not appear, it still has its place in IE6,7.

See what attributes this UL has in FF.

As can be seen in the figure, when list-style:none is defined in css, it has no effect on list-style-position and is still the default setting for FF browsers. The value is outside.

And IE6, 7 is likely to default to list-style-position:inside.

To prove this, I replaced list-style:none with list-style:none inside none and tested it again.

Mandatory inside

Body,ul,li,p {padding:0;margin:0;font-size:12px;}

P {font:bold 16pxamp 180% arial;}

Div {background:#eee;margin-right:10px;}

P span {text-decoration:line-through;}

Ul {width:275px;margin:4px 0 015px *

Mandatory inside list-style:none inside none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

After running, it can be found that the performance is exactly the same as that of list-style:none in IE6,7.

So I speculate that in IE6,7, when UL has float:left and display:inline properties and list-style:none is set, list-style-position defaults to inside.

So my conclusion is that

Under IE6,7, when UL does not have float:left;display:inline;:

With or without the list-style:none attribute, the list character is hidden and does not occupy a position (5pcm6 in the following code)

When UL has the float:left;display:inline; property

List-style:none, the list character is hidden, but still has a location (list-style-position:inside); (UL1,ul3 in the following code)

Unset list-style:none; list characters are hidden and do not list-style-position:outside (code UL4)

UL02 performed well in all the browsers that participated in the test.

The last piece of code compares the performance of list-style in various situations, paying particular attention to the performance of 4, 5, 6 under IE6,7.

List-style:none or list-style:none outside none?

Body,ul,li,p {padding:0;margin:0;font-size:12px;}

P {font:bold 16pxamp 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 015pxbot backgroundwater 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 {}

1float list-style:none leftport displayful inline line; float

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

2float float leftport displayful inline line; list-style:none outside none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

3: float:left;display:inline;list-style:none inside none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

4float float leftport displayful inline; css reset not done

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

5: no display,float attribute list-style is none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

6: no display,float attribute, no list-style:none

Pure words, strange dream Pentium thoughts.

Just like for love, the demand is almost perfect.

A touch of youth on campus, simple boys and girls.

By comparing the results of the above code, I think:

In firefox, as long as list-style-type is none, list-style can be well hidden regardless of whether the value of list-stype-position is outside or inside.

In IE6,7, setting list-style:none alone is not enough to solve all the problems.

So I think it's better to use list-style:none outside none in css reset.

3. CSS forcefully refuses to change lines

In a ul with a specified width, I define the width of the li as automatic. An attempt is made to have the li align itself to the left according to the length of the content.

For example, there are four li in the ul with the width of 210px. The width of the four li is 80px, 120px, 140px, 80px according to their own content length.

The effect I need is 4 li automatically arranged to the left. When the sum of the length of the third li and the first two li is greater than the width of the ul, the third li moves down one line. It is shown on the second line. Instead of stretching the ul wide, or pushing yourself higher (content wrapping, height increase)

The width of ul is defined and the width of 210px and li is defined automatically. The result is:

The ul is not stretched, but unfortunately the li is not arranged automatically to the bottom. But the content changes, propping up the li. And then cheeky squeezed in the first row.

After careful consideration, it is concluded that the problem lies in the internal content feeds of li. So look for the css attribute that forbids line wrapping.

Solution:

Add white-space:nowrap to li to force no line wrapping.

After reading the above, do you have any further understanding of the skills you have to know about web page making? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.