FF IE7 IE6 CSS support problems [tag webpages]

For more information, see http://netsos.cnblogs.com/1 ,! Important (limited function)
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
For example:

# Example {
Width: 100px! Important;/* IE7 + FF */
Width: 200px;/* IE6 */
}

Ii. CSS hack method (for beginners, let's take a look at it and pass it)

The first thing you need to know is:
Reprinted please specify http://netsos.cnblogs.com/
General height of all browsers: 100px;
IE6 dedicated _ Height: 100px;
IE7 dedicated * + Height: 100px;
IE6 and IE7 share * Height: 100px;
IE7 and FF share Height: 100px! Important;

For example:

# Example {Height: 100px;}/* FF */

* Html # example {Height: 200px;}/* IE6 */

* + Html # example {Height: 300px;}/* IE7 */

The following method is relatively simple:
Reprinted please specify http://netsos.cnblogs.com/
For example:

1. IE6-IE7 + FF

# Example {
Height: 100px;/* FF + IE7 */
_ Height: 200px;/* IE6 */
}
In fact, the first method mentioned above can also be used.
# Example {
Height: 100px! Important;/* FF + IE7 */
Height: 200px;/* IE6 */
}

2. IE6 + IE7-FF

# Example {
Height: 100px;/* FF */
* Height: 200px;/* IE6 + IE7 */
}

3. IE6 + FF-IE7

# Example {
Height: 100px;/* IE6 + FF */
* + Height: 200px;/* IE7 */
}

4. IE6 IE7 FF varies

# Example {
Height: 100px;/* FF */
_ Height: 200px;/* IE6 */
* + Height: 300px;/* IE7 */
}
Or:This is the order -----------------> here we add an apple, [all dead] --- For SafariI can't write it here. I put it at the bottom. The blog garden always filters out my words ,,,,,,,

 

# Example {
Height: 100px;/* FF */
* Height: 300px;/* IE7 */
_ Height: 200px;/* IE6 */
}

Note that,CodeThe order must not be reversed, or the previous steps will be abandoned. Because the browser is explainingProgramIf the name is duplicated, it will overwrite the previous one, just like assigning a value to the variable. Therefore, we put the general purpose in front of the variable, and the more dedicated it is, the more
Reprinted please specify http://netsos.cnblogs.com/
Explain the code 4:

When you read the code, the first line of Height: 100px is common. IE6 IE7 FF shows 100px.
The second line * Height: 300px; FF does not recognize this attribute, IE6 IE7 recognizes it, So FF also displays 100px, while IE6 IE7 overwrites the height attribute obtained from the first line, both display 300px
To the third row _ Height: 200px; only IE6 knows, so IE6 overwrites the height obtained in the second row, and finally displays 200px
In this way, all three browsers have their own height attributes.

If you still don't understand this, either you hit the wall or I went! But it is better for you to go.

Oh, I almost forgot to say:
* + For HTML compatibility with IE7, the following declaration must be made on the top of HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
Reprinted please specify http://netsos.cnblogs.com/

3. Use ie-specific condition annotations

<! -- Other browsers -->

<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>

<! -- [If IE 7]>

<! -- Suitable for IE7 -->

<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>

<! [Endif] -->

<! -- [If lte ie 6]>

<! -- Suitable for IE6 and below -->

<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>

<! [Endif] -->

It seems that three sets of CSS are to be compiled. I haven't used them yet. Stick them first.

If condition hack of IE

1. All except Ie can be recognized
2. all IE identifiable
3. only ie5.0 can recognize
4. only ie5.0 and ie5.5 can be recognized
5. both ie5.0 and ie5.0 can be recognized
6. only IE6 can recognize
7. versions earlier than IE6 and IE6 are recognizable
8. IE6 and IE6 and later versions can be recognized
9. only IE7 is recognizable
10. versions earlier than IE7 and IE7 are recognizable
11. IE7 and IE7 versions can be identified note: GT = great then greater than
=> greater than
lT = less than
<= GTE = great then or equal greater than or equal to
LTE = less then or equal less than or equal to

Iv. CSS Filter Method (translated by the author from a foreign classic website)
Reprinted please specify http://netsos.cnblogs.com/
Create a CSS style as follows:

# Item {

Width: 200px;

Height: 200px;

Background: red;

}

Create a new Div and use the CSS style defined above:

<Div> some text here </div>

Add the lang attribute in the body representation. The Chinese character is Zh:

<Body lang = "en">

Now define another style for the DIV element:

*: Lang (en) # item {

Background: Green! Important;

}

This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, unfortunately, Safari does not support this attribute, so you need to add the following CSS style:

# Item: Empty {

Background: Green! Important

}
Reprinted please specify http://netsos.cnblogs.com/
: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than IE versions.

5. Float closure (clearing float)

In some browsers, the webpage is often displayed incorrectly because float is not actually closed, which is also one reason why Div cannot adapt to the height. If the parent Div does not have a float and its Child Div has a float, the parent Div cannot enclose the entire child Div. This usually occurs when a parent Div contains multiple child Div. Solution:

1. Set float to the parent Div (Don't scold me, I know it's nonsense)

2. Add an empty Div after all sub-Div (not recommended, Some browsers can see the gaps generated by the empty Div)
Reprinted please specify http://netsos.cnblogs.com/
For example:

. Parent {width: 100px ;}
. Son1 {float: Left; width: 20px ;}
. Son2 {float: Left; width: 80px ;}
. Clear {clear: Both; margin: 0; parding0; Height: 0px; font-size: 0px ;}

<Div class = "parent">
<Div class = "son1"> </div>
<Div class = "son2"> </div>
<Div class = "clear"> </div>
</Div>

MD, filtered out for me... see ....

@ Media screen and ("apple-tab-span" style = "font-family: 'courier new'; white-space: Pre;"> P { Color: #633; }}

 

No more !!!!!!, I will comment on it and see if I can get it out?