General CSS-compatible methods for IE6, IE7, and FF

CSS compatibility with various browsers is already a common issue, and tutorials on the Internet are everywhere. The following content is not too novel. It is a personal summary and I hope it will be helpful for beginners.

I. CSS hack

 

Hack concept:
Different browsers, such as Internet Explorer 6, Internet Explorer 7, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers. This process of writing different CSS codes for different browsers is called CSS hack,

Hack rules:

Ie can recognize *; standard browsers (such as ff) cannot recognize *; IE6 can recognize *, but cannot recognize! Important; IE7 can recognize * and can also recognize! Important; FF cannot recognize *, but can recognize it! Important;

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

Browser priority: FF <IE7 <IE6, CSS hack write order is generally FF IE7 IE6
Example:
Take: "# demo {width: 100px;}" as an example;
# Demo {width: 100px ;}
* Html # demo {width: 120px ;}
* + Html # demo {width: 130px ;}

---------------
So finally, # The demo width is interpreted in three browsers:

Firefox: 100px; IE6: 120px; IE7: 130px;The next 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 .)
<Style>
# Wrapper
{
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>

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

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Set the followingCodeAdd class = "Clearfix" to the DIV to be closed in global CSS.
<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>

Iii. Other compatibility skills

1.
UL labels have padding values by default in Mozilla, while only margin has values in IE. Therefore, defining ul {margin: 0; padding: 0;} can solve most of the problems. Also 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)
You can place any project in the HTML body. The project automatically obtains equal left and right boundary values to ensure center display. However, this problem still exists in browsers earlier than IE6 and will not be centered. Therefore, you must modify it as follows:
Body {
Text-align: center;
}
# Content {
Text-align: left;
Width: 700px;
Margin: 0 auto;
}
Setting the body will cause the body content to be centered, but even all the text is centered. This is not the expected effect. For this reason, # The content Div must specify a value: text-align: left

3. The box interpretations of ie5 and IE6 are inconsistent.

Div {width: 300px; margin: 0 10px 0 10px;} under ie5 ;}

The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px,
In IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px.
In this case, we can modify Div {width: 300px as follows! Important; width: 340px; margin: 0 10px 0 10px}
I don't quite understand what this is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

4. Prior declaration of form and UL labels
In ie, the two labels will automatically margin some margins, while in FF, margin is 0. Therefore, if you want to display consistent, so it is best to specify margin and padding in CSS. For the above two problems, I usually use this style ul first in CSS, FORM {margin: 0; padding: 0 ;} definition is dead, so it won't be a headache in the future.

5.
Cursor: pointer can display the cursor finger shape in IE ff at the same time, hand only ie Can

6.
If the text is too long, the excessive part will be changed to the ellipsis: ie5, FF is invalid, but can be hidden. IE6 is valid <Div style = "width: 120px; Height: 50px; Border: 1px solid blue; overflow: hidden; text-overflow: ellipsis "> <nobr> indicates that a line of text is long and the rows in the table cannot be displayed. Phontol.com </nobr>
Fixed width Chinese Character truncation: overflow: hidden; text-overflow: ellipsis; white-space: nowrap .) (Ie5 or above) FF cannot. It only hides.

7.
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, 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 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 ;}

8. Double distance produced by 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 block elements always start on a new line, and can be controlled by the height, width, row height, and margin (block element ); the Inline element is not controllable (embedded element) on the same line as other elements );
# 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;

10. why can't the FF text support the height of the container?
Containers with fixed height values in the standard browser won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the Min-Height: 200px setting for height. Here, we can define this to take care of IE6 that does not know Min-height:
{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}

11. 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,
This 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">
<P> content in the p 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 compatibility between IE and Firefox */
1. doctype affects CSS Processing

2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. FF: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

5. FF: supported! Important, ie is ignored, available! Important sets a special style for FF

6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to the vertical center. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

8. FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

9. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:
Div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

10. The box interpretations of ie5 and IE6 are inconsistent.
Under ie5
Div {width: 300px; margin: 0 10px 0 10px ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define
Ul {margin: 0; padding: 0 ;}
Most problems can be solved.

Note:

1. The DIV of float must be closed.

Example: (floata and floatb attributes have been set to float: Left ;)
<# Div id = "floata"> </# div>
<# Div id = "floatb"> </# div>
<# Div id = "notfloatc"> </# div>
The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In
<# Div class = "floatb"> </# div>
<# Div class = "notfloatc"> </# div>
Add
<# Div class = "clear"> </# div>
This Div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.
And define the clear style as follows:
. Clear {
Clear: Both ;}
In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
For example, a wrapper is defined as follows:
. Colwrapper {
Overflow: hidden;
Zoom: 1;
Margin: 5px auto ;}

2. The problem of doubling margin.

The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:

<# Div id = "imfloat"> </# div>

The corresponding CSS is

# Iamfloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.
. Tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE */}

 

PS:

In IE, floating attributes defined by some layers can be omitted in many places, but FF does not work. Each layer must be clearly written. When several Div layers are horizontally arranged, IE6 must be added.Display: inline; Otherwise, the front-end will display double spacing, while FF will display normally without display. these are caused by the differences in browser default values. You can see that the layout of those websites is normal in all browsers because they have clearly defined the differences between these default values.

Compatible with multiple browsers,Just remember IE7 = *, IE6 = _, and write it in the order of Firefox, IE7, and IE6.In general, it can ensure that most users can browse normally. For example: # ABC {width: 600px; * width: 600px; _ width: 590px;}. In this way, only the normal definition is displayed during Firefox reading, while IE can see the second * definition, so ignore the first normal definition. in IE, because IE7 does not support _, execute the first rule with the * number, IE6 supports _, so it is considered that the "*" is also a duplicate definition. Ignore it and execute the last definition. 126 Furniture Materials network