Compatibility between Div + CSS and different IE/FF versions

Div + CSS design IE6, IE7, FF compatibility

Div + CSS web page layout is a trend, and I began to adapt to this trend. However, when using Div + CSS website design, we should note that CSS styles are compatible with different browsers, especially for webpages fully designed using Div + CSS, you should pay more attention to the CSS style compatibility of IE6 IE7 ff. Otherwise, Your webpage may be messy! I often get overwhelmed by these things, so I found some information on the Internet, added my understanding and experience in these days, and sorted out some materials, some of the things I haven't used and can't understand are stuck from other places. I don't know if there are any errors. Please change them later, I hope it will be helpful to you!

What is browser compatibility? When we use different browsers (Firefox IE7 IE6) to access the same website or page, some incompatibility problems may occur, in this browser, the display is normal, and the other one is messy. We will be very annoyed when writing CSS, And we just fixed the problem of this browser, as a result, another browser has a new problem. Okay, I will write a piece of CSS with your incompatibility, so that they can execute each piece of CSS. Now you have no temper, huh, huh.

Okay, let's get down to the truth.

I ,! 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:

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:

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:
# Example {
Height: 100px;/* FF */
* Height: 300px;/* IE7 */
_ Height: 200px;/* IE6 */
}

It should be noted that the order of the Code must not be reversed, or you will not be able to discard it. Because when the browser interprets the program, if the name is duplicated, it will overwrite the previous one, just like assigning a value to the variable, so we put the general purpose above, the more dedicated the server, the more the backend server.
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">

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. <! -- [If! IE]> <! --> All except Ie can be recognized <! -- <! [Endif] -->
2. <! -- [If IE]> all IE identifiable <! [Endif] -->
3. <! -- [If IE 5.0]> only ie5.0 can recognize <! [Endif] -->
4. <! -- [If IE 5]> only ie5.0 and ie5.5 can be recognized <! [Endif] -->
5. <! -- [If gt ie 5.0]> both ie5.0 and ie5.0 can be recognized <! [Endif] -->
6. <! -- [If IE 6]> only IE6 can recognize <! [Endif] -->
7. <! -- [If lt IE 6]> versions earlier than IE6 and IE6 are recognizable <! [Endif] -->
8. <! -- [If gte ie 6]> IE6 and IE6 and later versions can be recognized <! [Endif] -->
9. <! -- [If IE 7]> only IE7 is recognizable <! [Endif] -->
10. <! -- [If lt IE 7]> versions earlier than IE7 and IE7 are recognizable <! [Endif] -->
11. <! -- [If gte ie 7]> IE7 and IE7 versions can be identified <! [Endif] --> Note: GT = great then is greater
>=> Greater
Lt = less then less
<=< Minor sign
GTE = great then or equal greater than or equal
LTE = less then or equal less than or equal

Iv. CSS Filter Method (translated by the author from a foreign classic website)

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

}

: 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)

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>

3. Universal float Closure

Add the following code to global CSS and add class = "Clearfix" to the DIV to be closed.
Code:
<Style>
/* Clear fix */
. Clearfix: After {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
. Clearfix {
Display: inline-block;
}
/* Hide from IE Mac \*/
. Clearfix {display: block ;}
/* End hide from IE Mac */
/* End of Clearfix */
</Style>

: After (pseudo object), set the content after the object, usually used with content, ie does not support this pseudo object, not supported by IE browsers, so it does not affect IE/win browsers. This is the most troublesome.

4. overflow: auto (I just saw it and strongly recommended it)

You only need to add overflow: auto to the CSS of the parent Div.

Example:

. Parent {width: 100px; overflow: auto}
. Son1 {float: Left; width: 20px ;}
. Son2 {float: Left; width: 80px ;}

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

The principle is that the peripheral elements cannot be well extended. The problem lies in overflow because overflow is invisible (see W3C explanation ). Now, you only need to add an "overflow: auto" to the peripheral element to solve the problem. The result is that Internet Explorer can be used in addition to Internet Explorer. The problem of IE will be solved. The problem is completely solved by adding "_ Height: 1%.

I tried it. In fact, it does not apply "_ Height: 1%" to IE. Keep it.

6. Compatibility details

1. Setting padding for Div under FF will increase the width and height (the actual width of DIV = div width + padding), but IE will not.

Solution: Set the IE and FF widths for the DIV, and add the IE special mark "*" before the IE width.

2. The page is centered.

Body {text-align: center;} is sufficient in IE, but it fails in ff.

Solution: Add "margin-Right: auto; margin-left: auto ;"

3. Sometimes we see some strange gaps on IE6, but we have set the height clearly.

Solution: Add "font-size: 0px;" to the DIV with gaps ;"

4. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

5. Double distance produced by floating IE6

# Box {float: left;
Width: 100px;
Margin: 0 0 0 100px;
}
In this case, IE6 will generate a PX distance.

Solution: Add display: inline to ignore floating

Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the characteristics of the inline element are: on the same line as other elements ,... Uncontrollable (embedded element );
# Box {display: block; // The embedded element can be simulated as the block element display: inline; // you can arrange the same row.

6. Minimum page width

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. However, ie does not recognize the Min-definition, but in fact it treats the normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is heavy.

Solution: to make this command usable on IE, you can put <div> under the <body> label and specify a class for div:
Then CSS is designed like this:
# Container {
Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");
}
The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

7. padding and margin of UL and form labels

UL labels have padding values by default in FF, while only margin has default values in IE. In ie, the form label will automatically margin some margins, while in FF, the margin is 0;

Solution: first, the style ul is used in CSS, and FORM {margin: 0; padding: 0;} is defined to be dead. This will not be a headache in the future.

8. Div floating ie text produces a 3-pixel bug

The following section is what I pasted on the Internet.

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.
# Box {
Float: left;
Width: 800px ;}
# Left {
Float: left;
Width: 50% ;}
# Right {
Width: 50%;
}
* Html # Left {
Margin-Right:-3px;
// This sentence is the key
}
HTML code
<Div id = Box>
<Div id = left> </div>
<Div id = right> </div>
</Div>

For the above Code, let's talk about my understanding:

First, as long as right defines the width attribute, two lines are displayed under ff.
2. If both width values are defined as percentages, even if both width values are 100%, a row is displayed under IE. Therefore, the above saying "this sentence is the key" is useless, and it is in a row without adding it, unless you define a value in width.

So the above Code is actually not very useful, at least it won't work in ff. In fact, you only need to define the left width. If right does not define the width, It will be successful in IE or ff, in this case, the parent Div box does not actually contain the left and right child Divs. You can use the 5th method mentioned above to solve this problem. The simplest way is to add float: left to the right, and then OK!

9. hyphens (-)

. Hh {-o-text-overflow: ellipsis;
Text-overflow: ellipsis;
White-space:
Nowrapoverflow: hidden;
}
This part of the text will be cut off and ended with a ellipsis. Technology is a good technology, and many people like to use it indiscriminately, but note that Firefox does not support it.