The solution to the problem of IE6.7.8.FF compatibility

As a Web architect, in the design of the site, should pay attention to the most common problem is the CSS style compatible with different browser problems, especially for the full use of Div CSS design site, you should pay more attention to the IE6 IE7 FF compatible CSS style, otherwise, your network chaos may go out do not want to appear the effect!

All Browsers Universal
height:100px;

IE6 Special
_height:100px;

IE6 Special
*height:100px;

IE7 Special
*+height:100px;

IE7, FF shared
height:100px!important;
First, CSS compatible
The following two methods can solve almost all of today's compatibility.

1,!important (not very recommended, with one of the following feel safest)

With IE7 support for!important, the!important method is now only for IE6 compatibility. (Note the wording. Remember that the claim position needs to be advanced.)

Code:
<style>
#wrapper {
Width:100px!important; * IE7+FF * *
width:80px; * IE6 * *
}
</style>

2, ie6/ie77 CSS style for Firefox <from IE6 IE7 for Firefox >

*+html and *html is the unique label of IE, Firefox is not supported. And *+html is IE7 unique label.

Code:
<style>
#wrapper {width:120px}/* FireFox/*
*html #wrapper {width:80px}////* IE6 fixed */
*+html #wrapper {width:60px}//* IE7 fixed, note order * *
</style>

Attention:
*+html compatibility with IE7 must ensure that the top of the HTML has the following declaration:

Code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://w3.org/TR/html4/loose.dtd ">

Second, universal float closure (very important!)

You can use this to resolve multiple div alignment when the spacing is not right,

The principle of clear float can be found in [how to clear floats without structural Markup]
Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.

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>

Third, other compatibility techniques (quite useful)

1, under the FF to the DIV set padding will cause the width and height increase, but IE will not. (Available!important solution)
2, center problem.
1). vertically centered. Set the line-height to the same height as the current Div, and then pass the Vetical-align:middle. (Note that the content is not wrapped.)
2). Horizontally centered. margin:0 Auto; (certainly not omnipotent)
3, if you need to add a style to the contents of a label, you need to set display:block (common to navigation tags)
4, FF and IE on the BOX understanding of the difference between the 2px is also set for float div in IE under the margin doubling and so on.
5, the UL label below the FF default has List-style and padding. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and content lists)
6, as an external wrapper div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.
7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE. Paste code:

Compatible code: Compatible with the most recommended mode.
/* FF * *
. Submitbutton {
Float:left;
width:40px;
height:57px;
margin-top:24px;
margin-right:12px;
}
* IE6 * *
*html. Submitbutton {
margin-top:21px;
}
* IE7 * *
*+html. Submitbutton {
margin-top:21px;
}

What is browser compatibility:

When we use different browsers (Firefox IE7 IE6) access to the same Web site, or page, there will be some incompatible problems, some show normal, some show abnormal, we are in the writing CSS will be very annoyed, just fixed the problem of the browser, As a result, another browser has a new problem. Compatibility is a way to allow you to write independently in a CSS to support the styles of different browsers. It's a harmonious situation!

People with a bit of logic will know that they can be used in combination with IE and FF compatibility.

Here are three compatible, for example: (Suitable for beginners, hehe, Master pass by.) ）

Program code

First compatible, IE FF all browsers public (not actually compatible)
height:100px;
A second compatible IE6 dedicated
_height:100px;
Third compatible IE6 IE7 public
*height:100px;

After the introduction of these three compatible, let's take a look at how to define a single attribute in a style IE6 IE7 FF-specific compatibility, look at the following code, the order can not be wrong oh:

Program code

height:100px;
*height:120px;
_height:150px;

Let me briefly explain how each browser understands these three properties:

Under FF, the 2nd and 3 attribute FF are not recognized, so it reads height:100px;

Under IE7, the third property IE7 is not recognized, so it reads 1th, 2 properties, and because the second property overrides the first property, IE7 finally reads the 2nd attribute *height:120px;

Under IE6, three properties are IE6, so all three properties can be read, and because the third property overrides the first 2 properties, IE6 finally reads the third property.

1 CSS styles for Firefox IE6 IE7

Now most are compatible with!important, for IE6 and Firefox test can be normal display, but IE7 to!important can be correctly interpreted, will cause the page did not appear as required! Find a good compatible way for IE7 is to use the "*+html", now use IE7 to browse, there should be no problem now write a CSS can be this:

#1 {color: #333;}/* Moz/*
* HTML #1 {color: #666}/* IE6 * *
*+html #1 {color: #999;}/* ie*/

Then in Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.

2 centering problems in CSS layouts

The main style definitions are as follows:

body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }

Description

First, the parent element defines text-align:center, which means that the content within the parent element is centered, and for IE this setting is OK.

But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”

What needs to be explained is that if you want to use this method to make the entire page centered, it is recommended not to be nested in a div, you can split out a number of Div, as long as in each split div defined margin-right:auto; Margin-left:auto; It's OK.

3 box models differ explained.

#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 generated by the floating IE

#box {float:left; width:100px; margin:0 0 0 100px; In this case IE will produce 200px distance display:inline; //Make floating Ignore}

Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);

#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;

5 ie with the width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height. For example, to set the background picture, this width is more important. To solve this problem, you can do this:

#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}

6 minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the 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 only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

7 Clear Floating

-Compatible box{
display:table;
To display an object as a table in block element level
} home.

Or

-Compatible box{
Clear:both;
} home.

or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. This is the most troublesome

... #box: after{
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

8 Div Floating IE text produces 3 pixel bugs home.

The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.

#box {
Float:left;
width:800px;}
#left {
Float:left;
width:50%;}
#right {
width:50%;
}
*html #left {
margin-right:-3px;
That's the key.
}
HTML code
<div id=box>
<div id=left></div>
<div id=right></div>
</DIV>

9 Property Selector (This is not compatible, is a hidden CSS bug)

p[id]{}div[id]{}
p[id]{}div[id]{}

This is hidden from the IE6.0 and IE6.0 versions, and the FF and opera functions

There is a difference between the property selector and the child selector, and the scope of the child selector shrinks from the form, and the property selector is larger in scope, as in P[id], and all of the P tags have the same type of ID.

The question of IE hide-and-seek

When the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek.
Some content does not show up when the mouse selects this area is found to be true on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

11 Height Not suitable

Height is not adaptable when the height of the inner object changes when the outer height can not be automatically adjusted, especially when the inner object is used
When margin or paddign. Cases:

<div id= "box" >
Content in the <p>p object </p>
</div>

Css:

#box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}

Workaround: Add 2 empty div object CSS code to and from the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

Screen IE browser (ie do not show)
*:lang (en) Select {font:12px!important;}/*ff,op Visible * *
Select:empty {font:12px!important}/*safari Visible * *
Here the Select is a selector and is replaced according to the situation. The second sentence is unique to the Safari browser on the Mac.

Only IE7 recognition
*+html {...}
This compatibility can be used when faced with the need to make styles only for IE7.

IE6 and IE6 following identification
* HTML {...}
This place should pay special attention to the fact that many landlords have written the compatibility of IE6, which ie5.x also recognize. Not recognized by other browsers.
html/**/>body Select {...}
This sentence is the same as the previous one.

Only IE6 not recognized
The Select {display/*ie6 does not recognize */:none;}
This is essentially a CSS annotation that separates a property from a value, which is released before the colon.

Only IE6 and IE5 not recognized
select/**/{display/*IE6,IE5 does not recognize */:none;}
This differs from the preceding sentence by having a CSS annotation between the selector and the curly brace.

Only IE5 not recognized
SELECT/*IE5 does not recognize/{Display:none}
This sentence is a comment that removes the attribute area from the previous sentence. Only IE5 not recognized

Box Model Solution
SELCT {width:ie5.x width; voice-family: ""} ""; Voice-family:inherit; Width: correct widths;}
The Purge method of the box model is not handled by!important. This should be clear.

Clear floating
Select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are floating, the parent's height cannot be completely wrapped around the entire child, and then the parent is defined once with this purge-float compatibility, so this problem can be solved.

truncated ellipsis
Select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden;}
This is the more than the length of their own to intercept the more parts of the text, and to the end of the ellipsis, a good technique. But Firefox doesn't support it at the moment.

Only Opera recognizes
@media all and (min-width:0px) {select {...}}}
Make a separate setting for the Opera browser.

The above are written in some of the CSS compatibility, the proposal to follow the correct label nesting (Div ul li nested structure relationship), so that you can reduce the use of compatible frequency, do not enter the understanding of misunderstanding, not a page requires a lot of compatibility to maintain multiple browser compatibility), In many cases, a compatibility may not also be able to make the browser work very well, these are used to solve the local compatibility problem, if you want to separate the content of compatibility, may wish to try the following several filters. Some of these filters are written in CSS through the filter to import special style, there are written in HTML through the conditions to link or import the required patch style.

ie5.x filter, only ie5.x visible
@media TTY {
I{content: "";/* "" */}} @import ' Ie5win.css '; /*";}
}/* */

Ie5/mac filters, usually not.
/**//*/
@import "Ie5mac.css";
/**/

The following is a conditional comment for IE, and the individual feels that using conditional annotations to invoke compatibility is a perfect, multiple browser-compatible solution. Put the need to be compatible with a separate file inside, when the browser version of the match can call the compatible style, so not only easy to use, but also for the production of this CSS itself, you can more strictly observe whether it is necessary to use compatible, in many cases, When I write CSS if all the code including compatibility are written to a CSS file when the time will be very casual, how compatible with how compatible, and you write independently, you will not consciously consider whether it is necessary compatible, is the first compatible with CSS? Or do you want to adjust the contents of the main CSS to as much as possible without compatibility? Do you have a sense of accomplishment when you let a lot of browsers be nice and obedient with little compatibility? You know how to choose it ~ ~ hehe

IE if conditions compatible with their own can be flexible to use see this IE condition annotation
Only IE
All IE can be identified

Only IE5.0 can identify
Only IE 5.0+
IE5.0 shifting IE5.5 can be identified

Only IE6 can be recognized
Only IE 7/-
IE6 and the ie5.x below IE6 can be identified
Only IE 7/-
Only IE7 can be recognized

Css There are a lot of things do not follow certain rules, will make you very upset, although you can through a lot of compatibility, a lot of!important to control it, but you will find that over the long term you will be very unwilling to see many excellent sites, their CSS let Ie6,ie7,firefox , even the Safari,opera run up perfect is not very envy? And their seemingly complex templates are less compatible to use below. In fact, you need to know that IE and Firefox is not so disharmony, we find a certain way, is completely let them coexist harmoniously. Don't you think that finding a compatible solution, you have everything, we are not compatible slaves.

Nested order of Div ul Li

Only one rule is spoken today. is the triangular relationship of <div><ul><li>. My experience is <div> in the outermost, inside is <ul>, and then is <li>, of course <li> inside also can nest <div> what, but do not suggest you nested a lot of things. When you meet this rule, those unlucky, disobedient gaps will not appear in the inside, when you are just <div> put <li>, and without <ul>, you will find that your gap is very difficult to control, in general, IE6 and IE7 are going to be more spaced out of thin air. But in many cases you come to the next line, the gap is gone, but the contents of the front is empty a large piece, this situation although you can change the margin of IE, and then adjust the Firefox below padding, so that the two show the effect is very similar, but you get CSS will become very long and incomparable, You have to think more about possible remedies for this kind of problem, although you know it's compatible with them, but you're going to get bored.

Specific nesting notation

Follow the above to be nested way,<div><ul><li></li></ul></div> then in the CSS inside tell ul {margin:0px; Padding:0px;list-style:none, where List-style:none is a marker that does not allow the front of the <li> tag to display a table of contents such as dots or digits. Because IE and Firefox show the default effect is somewhat different. So there's no need to do anything about it, your IE6, and IE7, Firefox display of things (outer distance, spacing, height, width) is almost no difference, perhaps careful you will at a certain time to discover the difference of one or two pixels, but that is perfect, You do not need to adjust the large CSS to control their display, you are willing to, you can only be compatible with one or two places, and usually this compatibility can adapt to various places, do not need you to repeat in different places to debug different compatibility methods-to ease your annoyance. You can Ul.class1, Ul.class2, UL.CLASS3 {xxx:xxxx} way to easily sort out where you want to be compatible, and unified compatible. Try it, no more nesting, although in the div+css way you can almost think how to nest on how to nest, but according to the rules above you will be a lot easier, so that more than twice!

This article by the station cool net - iffun original, reprint please retain this information, thanks for cooperation.