Convert CSS hack: different effects are displayed for IE6, IE7, and Firefox.

CSS hack: display different effects on IE6, IE7, and Firefox

It is often used for website creation. It is also important to measure the average usage of a div + CSS architect.

Different browsers use CSS hack:

Difference between IE6 and FF:
Background: orange; * Background: blue;

Difference between IE6 and IE7:
Background: Green! Important; Background: blue;

Difference between IE7 and FF:
Background: orange; * Background: green;

Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;

Note: Both IE and standard browsers (such as ff) cannot recognize *;

IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;

 

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√

 

------------------------------------------------------
Add another underscore "_",
IE6 supports underlines, while IE7 and Firefox do not.

 

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√
_	√	×	×

 

So you can also distinguish IE6, IE7, and Firefox.
: Background: orange; * Background: green; _ Background: blue;

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.

 

I. CSS hack
The following two methods can solve almost all today's hack.

1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)
<Stylegt;
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Stylegt;

2, IE6/ie77 for Firefox

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
<Style>
# Wrapper
{
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
}
</Style>

Note:
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

2. Universal float closure (very important !)

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Add the following code to global CSS and add the <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>

There are already many methods to close the floating element (clearing float). I personally think that the simple and practical method is to use: After pseudo-class dynamic embedding of an element used to clear the floating, unfortunately, the code size is too large, and it does not seem concise enough.

Now we can see that the method is super simple. This method is introduced. In: http://annevankesteren.nl/2005/03/clearing-floats

In this aspect, the principle is that the peripheral elements cannot be well extended 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. Next, we need to solve the ID problem, and add "_ Height: 1%". This problem is completely solved.

The following example is used as a comparison
1. No closed floating elements; 2. Non-ie closed floating elements; 3. Completely closed elements. The related code is as follows:

XHTML code:

Example source code [ww
Javas52css.com] <Div id = "Wrap">
<Div class = "column_left">
<H1> float left </Div>
<Div class = "column_right">
<H1> float right </Div>
</Div>

CSS style:

Example source code [ww
Using 52css.com] # wrap {border: 6px # CCC solid; overflow: auto; _ Height: 1% ;}
. Column_left {float: Left; width: 20%; padding: 10px ;}
. Column_right {float: Right; width: 75%; padding: 10px; border-left: 6px # Eee solid ;}

 

Iii. Other compatibility skills)

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

1. CSS style for Firefox IE6 IE7
Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests,
But IE7! Important can be correctly explained, and the page will not be displayed as required! Find a needle
The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.
You can write a CSS file as follows:

#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* IE7 */
The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

2. center problem in CSS layout
The main style definition is as follows:

Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.
However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence,
You only need to define margin-Right: auto; margin-left: auto; in each split Div.

3. Different explanations for the box model.

# Box {width: 600px; // For ie6.0-w \ idth: 500px; // for FF + ie6.0}
# Box {width: 600px! Important // for FF width: 600px; // for FF + ie6.0 width/**/: 500px; // For ie6.0 -}

4. Double distance of floating IE

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // 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 features of the inline element are as follows: 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; // the result of the same row arrangement is dilay: Table;

5 questions about IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used,
In a normal browser, these two values 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 important. To solve this problem, you can:
# Box {width: 80px; Height: 35px;} HTML> body # box {width: auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}

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. But IE does not recognize this,
In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <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. Clear floating

. Hackbox {display: Table; // display the object as a block element-Level Table} Or. hackbox {clear: Both ;}
Or add: After (pseudo object) to set the content after the object, which is 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 ...... # Box: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}

8 DIV floating ie text produces 3 pixel bug

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 critical}
HTML code <Div id = "box"> <Div id = "Left"> </div> <Div id = "right"> </div>

9 attribute selector (this is incompatible and is a bug in hiding CSS)

P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0. It is used by ff and opera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.

10 Internet Explorer

When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page.
Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

11 highly unsuitable

The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses
Margin or paddign.
Example:
<Div id = "box">
Content in object P
</Div>
CSS: # box {background-color: # Eee ;}
# Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.

CSS hack: display different effects on IE6, IE7, and Firefox

It is often used for website creation. It is also important to measure the average usage of a div + CSS architect.

Different browsers use CSS hack:

Difference between IE6 and FF:
Background: orange; * Background: blue;

Difference between IE6 and IE7:
Background: Green! Important; Background: blue;

Difference between IE7 and FF:
Background: orange; * Background: green;

Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;

Note: Both IE and standard browsers (such as ff) cannot recognize *;

IE6 can recognize *, but cannot recognize it! Important,
IE7 can recognize * and can also recognize! Important;
FF cannot recognize *, but can recognize it! Important;

 

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√

 

------------------------------------------------------
Add another underscore "_",
IE6 supports underlines, while IE7 and Firefox do not.

 

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√
_	√	×	×

 

So you can also distinguish IE6, IE7, and Firefox.
: Background: orange; * Background: green; _ Background: blue;

Note: No matter what method, the order of writing is Firefox's preface, IE7's writing in the middle, and IE6's writing at the end.

 

I. CSS hack
The following two methods can solve almost all today's hack.

1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)
<Stylegt;
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Stylegt;

2, IE6/ie77 for Firefox

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
<Style>
# Wrapper
{
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
}
</Style>

Note:
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

2. Universal float closure (very important !)

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Add the following code to global CSS and add the <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>

There are already many methods to close the floating element (clearing float). I personally think that the simple and practical method is to use: After pseudo-class dynamic embedding of an element used to clear the floating, unfortunately, the code size is too large, and it does not seem concise enough.

Now we can see that the method is super simple. This method is introduced. In: http://annevankesteren.nl/2005/03/clearing-floats

In this aspect, the principle is that the peripheral elements cannot be well extended 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. Next, we need to solve the ID problem, and add "_ Height: 1%". This problem is completely solved.

The following example is used as a comparison
1. No closed floating elements; 2. Non-ie closed floating elements; 3. Completely closed elements. The related code is as follows:

XHTML code:

Example source code [ww
Javas52css.com] <Div id = "Wrap">
<Div class = "column_left">
<H1> float left </Div>
<Div class = "column_right">
<H1> float right </Div>
</Div>

CSS style:

Example source code [ww
Using 52css.com] # wrap {border: 6px # CCC solid; overflow: auto; _ Height: 1% ;}
. Column_left {float: Left; width: 20%; padding: 10px ;}
. Column_right {float: Right; width: 75%; padding: 10px; border-left: 6px # Eee solid ;}

 

Iii. Other compatibility skills)

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

1. CSS style for Firefox IE6 IE7
Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests,
But IE7! Important can be correctly explained, and the page will not be displayed as required! Find a needle
The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.
You can write a CSS file as follows:

#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* IE7 */
The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

2. center problem in CSS layout
The main style definition is as follows:

Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.
However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence,
You only need to define margin-Right: auto; margin-left: auto; in each split Div.

3. Different explanations for the box model.

# Box {width: 600px; // For ie6.0-w \ idth: 500px; // for FF + ie6.0}
# Box {width: 600px! Important // for FF width: 600px; // for FF + ie6.0 width/**/: 500px; // For ie6.0 -}

4. Double distance of floating IE

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // 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 features of the inline element are as follows: 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; // the result of the same row arrangement is dilay: Table;

5 questions about IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used,
In a normal browser, these two values 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 important. To solve this problem, you can:
# Box {width: 80px; Height: 35px;} HTML> body # box {width: auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}

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. But IE does not recognize this,
In fact, it uses width as the minimum width. To enable this command to be used on IE, you can place <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. Clear floating

. Hackbox {display: Table; // display the object as a block element-Level Table} Or. hackbox {clear: Both ;}
Or add: After (pseudo object) to set the content after the object, which is 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 ...... # Box: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}

8 DIV floating ie text produces 3 pixel bug

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 critical}
HTML code <Div id = "box"> <Div id = "Left"> </div> <Div id = "right"> </div>

9 attribute selector (this is incompatible and is a bug in hiding CSS)

P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0. It is used by ff and opera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.

10 Internet Explorer

When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page.
Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

11 highly unsuitable

The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses
Margin or paddign.
Example:
<Div id = "box">
Content in object P
</Div>
CSS: # box {background-color: # Eee ;}
# Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.