CSS IE6, 7 about position a bug problem sharing

A long time did not come, small brother is Miss Miss me. Because of the recent work with CSS more, so occasionally encounter some of its problems, CSS is very powerful, especially later CSS3. I am learning, if the problems encountered, analysis of deviations, hope everyone Haihan ha!! The following is a question I have just met, perhaps some of the elder Danale will in the mind BS me, but for me, are harvest! Rattle

As is known to all, we all know that the positioning position property in CSS is a fairly important and special property. It has several property values, respectively:

1. position:relative;

2. Position:absolute;

3. position:fixed;

4. position:static;

5. Position:inherit;

Of course, we often use the first three, the last two rarely used.

Next I'll talk about the first two attribute values in use, IE6, 7 encountered a bug.

I remember the previous contact with CSS, always feel the location is very useful, like playing chess, want to decide where to set up there. That's because I don't know position also has its taboo or sensitive attributes. such as float float.

Here we do not talk about the contradictions between them, first look at this look after the question of the straight call:

In the IE8 of the following version, if you use a bad position attribute, you will often encounter the problem of page dislocation, and these problems, in the standard browser, is not reflected. This is for our front-end novice, we only do the page, often using standard browser Firefox and so on to real-time debugging (usually Firebug) and caused by IE finally do not adapt. So, we have to work in real-time with multi-browser debugging, so that problems can be resolved in a timely manner. (Otherwise, after the page is done, you will be back to solve the problem, you are KB)!

Let's take a look at the following questions:

1, this is the normal display under the FF

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/4D/89/wKiom1RS8WWzUky9AAkxWQXMnqY227.jpg "title=" zc.jpg "alt=" Wkiom1rs8wwzuky9aakxwqxmnqy227.jpg "/>

2, this is in the IE6, 7 under the dislocation abnormal display

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/4D/89/wKiom1RS8ZrSrbuDAAlkTBUgTAk970.jpg "title=" Bzc.jpg "alt=" Wkiom1rs8zrsrbudaalktbugtak970.jpg "/>

Of course, the above two display effects of the code is absolutely the same.

Here's the code in CSS:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/4D/89/wKiom1RS8mqRcSjEAAEDdqMyYfk336.jpg "title=" Jjq.jpg "alt=" Wkiom1rs8mqrcsjeaaeddqmyyfk336.jpg "/>

Inside the header class is the parent class, the following txt is a subclass, they apply to the position in the relative positioning (relative) and absolute positioning (absolute). Under such code, FF and IE6, 7, respectively, are displayed as above page. When I solved the problem, I really struggled for a while.

At that time, I was a step by step backwards troubleshooting, the results of the code under the. txt class, found that the Font-style attribute can be solved IE6, 7 dislocation problem, I am ignorant,, this Nima font-style attribute when the tube font style, and this layout has a hair relationship!! However, IE6, 7 is such a hanging,,, there are font-style properties, dislocation, not normal. I day,,,, just when I tangled, my eldest brother came to me to help me analyze a, she also said that can not be Font-style property. She said, my heart is more bottom, it seems that I analyze the wrong or analysis right, not font-style, Gaga

But what is the problem, finally the boss looked at my code, said, your topic content (that is, with relative positioning relative of the parent class) width is worth setting it? I said no, she said you add a width value to look at. The result is the following code:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/4D/8A/wKioL1RS9V3ABH13AAEOtT9LJTc710.jpg "title=" Jjh.jpg "alt=" Wkiol1rs9v3abh13aaeott9ljtc710.jpg "/>

Everyone see me with the red frame circled out of the property, on this one east, hey, it really solves the problem, this is the root of the problem, what Font-style? It is a soy sauce, day,,,

Later, the eldest brother told me that in IE6, 7, with the position attribute must be cautious, the use of and do not affect the layout of the property with the whole, do not be lazy. Because, you lazy, like the above code, just because you lazy less write a width property, IE6, 7 on the analysis of the relative, absolute positioning is who relative, who absolutely!!

In this regard, small code brother summarized as follows:

In IE8 Browser, if you encounter to use the position, absolute positioning, it is necessary to ensure that the parent-child must have the width value of the wide property. To prevent IE8 the following browsers cannot parse the relationship between them because the parent-child level does not have a width value set.

Finally, want to say is, this article for small size elder brother carefully original, if have reproduced please indicate source! Thank you

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1570248

CSS IE6, 7 about position a bug problem sharing