A summary of CSS compatibility issues with IE and Firefox

CSS for browser compatibility is very high value, usually in the case of IE and Firefox browser there is a large resolution difference, here is a description of the compatibility points.

CSS for browser compatibility is very high value, usually in the case of IE and Firefox browser There is a large resolution difference, here is a description of the compatibility points.

• 1, DOCTYPE Impact CSS Processing
• 2, Ff:div set Margin-left, margin-right for Auto is already centered, IE not
• 3, Ff:body set text-align, Div need to set Margin:auto (mainly margin-left,margin-right) square can be centered
• 4, FF: Set padding, div will increase the height and width, but IE will not, it is necessary to use!important more set a height and width
• 5, FF: Support!important, IE is ignored, can be used!important for FF special set style, it is noteworthy that the XXXX!important must be placed in another sentence above
• 6, Div Vertical center problem: vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines
• 7, Cursor:pointer can be at the same time in the IE FF display cursor finger-like, hand only IE can
• 8, FF: Link plus border and background color, you need to set the Display:block, while setting the Float:left guarantee do not change lines. Refer to MenuBar, to set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.
• 9, in Mozilla Firefox and IE in the box model interpretation of inconsistencies led to a difference of 2px solution: div{margin:30px!important;margin:28px;}
  Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in the case of IE, the explanation is as follows: div{maring:30px;margin:28px}
  Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;
• 10, IE5 and IE6 's box explanation is inconsistent
  IE5 under div{width:300px;margin:0 10px 0 10px;}
  The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated with 300px+10px (right padding) +10px (left padding) =320px. At this point we can do the following modification div{width:300px! important;width/**/:340px;margin:0 10px 0 10px}
  About this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if someone understand, please tell me, thanks!:
• 11, UL label in Mozilla default is padding value, and in IE only margin have value, so first define ul{margin:0;padding:0;}

We can solve most of the problems.

Precautions:

1, float the div must be closed.

For example: (where the Floata, FLOATB properties have been set to Float:left;) < #div id=\ "Floata\" >

< #div id=\ "Floatb\" >

< #div id=\ "notfloatc\" >

The NOTFLOATC here do not want to continue to translate, but want to row down.

This code has no problem with IE, the problem is ff. The reason is that NOTFLOATC is not a float label and the float label must be closed.

In the < #div class=\ "Floatb\" >

< #div class=\ "notfloatc\" >

Plus < #div class=\ "Clear\" >

This div must pay attention to the declaration location, must be placed in the most appropriate place, and must be with two of the float property of the div sibling, there can be no nested relationship, or you will produce an exception.

and define clear this style as follows:. Clear{clear:both;}

In addition, in order to allow the height to automatically adapt, to wrapper inside add Overflow:hidden;

When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (Evil ie Ah!) With Zoom:1, it can be done, so that it is compatible.

For example, a wrapper is defined as follows:. colwrapper{

Overflow:hidden;

Zoom:1;

margin:5px Auto;}

2, margin double the problem.

Div set to float will double the margin set under IE. This is a bug that IE6 all exist.

The solution is to add display:inline to the div;

For example:

< #div id=\ "imfloat\" >

The corresponding CSS is

#IamFloat {

Float:left;

Margin:5px;/*ie under the understanding of 10px*/

Display:inline;/*ie to be understood as 5px*/}

3, on the inclusion of the relationship between the container

Many times, especially when there are parallel layouts in the container, such as three float Div, the width is easily problematic. In IE, the width of the outer layer is broken by a wider div inside. Be sure to use Photoshop or firework to measure pixel-level precision.

4, about the height of the problem

If you are adding content dynamically, it is best not to define the height. The browser can scale automatically, however, if it is static content, the height is best set. (Sometimes it doesn't seem to go down automatically, don't know exactly what's going on)

5, the most ruthless means-!important;

If there is no way to solve some of the details, you can use this method. FF will automatically give priority to "!important", while 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 */}

It is worth noting that the XXXX!important must be placed on another sentence, which has been mentioned above;

IE7.0 out, there are new problems with the support of CSS. Browser more, the Web page compatibility is worse, tired or we, in order to solve the compatibility problem of IE7.0, to find the following article:

Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be correctly explained, will cause the page did not follow the requirements of the display! Search, find a IE7 good hack way is to use "*+html", now browse with IE7, there should be no problem.

Now write a CSS can do this:

#example {color: #333;}/* Moz/*

* HTML #example {color: #666}/* IE6 * *

*+html #example {color: #999;}/* IE7 * *

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

--------------------------------------------------------------------------------------------------------------- ------------------

Let's brush up on the box-model of IE

IE Box-model This notorious bug exists in every previous version of Ie6/win, and the bug was not tamed until Tantak released the most widely circulated hack.

IE5. X/win's resolution of Box-model is the same, they think that the width includes the border (border) and filler (padding), fortunately this situation has improved in the IE6

But IE6 is backwards compatible with the previous error, IE6 actually has two core, in the old page before he still shows the tolerance of the error, only in the document strictly with the document type (DOCTYPE) declaration, IE6 can accept the correct Box-model

Therefore, the Tantak hack must be included with the correct DOCTYPE in the document to work properly.

Quote

div.content {

width:400px; This is the wrong width, all browsers have read

voice-family: "}\" "; IE5. X/win ignores the contents of "\"}\ ""

Voice-family:inherit;

width:300px; Some browsers, including Ie6/win, read the phrase, and the new value (300px) overwrites the old

}

Html>body. Content {//html>body is CSS2 's writing

width:300px; The browser that supports CSS2 this writing is fortunate to have read this sentence

}

Now back to the topic, we often see!important and (Space)/**/: The combination of use, what is the secret of this writing?

Look at that writing, I can provide another way to achieve this effect

Quote

div.content {

width:300px!important; This is the correct width, most browsers that support!important tags use the values here

Width (space)/**/:400px; Ie6/win does not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win reads this, the new value (400px) covers the old, because the!important tag doesn't work for them.

}

Html>body. Content {//html>body is CSS2 's writing

width:300px; The browser that supports CSS2 this writing is fortunate to have read this sentence

}

Again, this method must still rely on the correct document type declaration to work properly, as has been said before.

A document type declaration is like a switch that opens the backward-compatible future, and when used incorrectly, is a Pandora box

---------------------------------------------------------------------------------------------------------------

The advent of ie7.0, whether he is more than ie6.0 progress, IE7 and IE6 incompatible between, there is no doubt that the introduction of a new sore, at least in the process of debugging, but also a number of procedures and the resulting large number of incompatibilities.

Currently, the number of users who use ie7.0 is still a minority, and users who use ie6.0 continue to occupy a large proportion. However, a large number of web pages that pass the IE6 test are not displayed properly in ie7.0.

According to ie7.0 official commentary:

ie7.0 introduced the strict pattern on the basis of IE6, which includes many improvements on cascading style sheet (CSS) parsing and rendering. These improvements are meant to improve Internet Explorer's ability to interpret cascading style sheets to meet recommended standards for the consortium, while providing developers with a collection of features to rely on.

No matter how beautiful the official language is, and whether ie7.0 is really a web-browser, there are too many personalized things between browsers, too many differences, let us helpless. Under the ie7.0 design of the Web page, IE6 below the display is almost unsightly. So, when we are designing the Web page, when we solve the compatibility problem of ie6.0 and Firefox, are we more compliant with the ie7.0 of some of the other people's websites, or are we compromising on the 96% ie6.0? This problem is actually a bit superfluous, what we can do, perhaps only the moderation of choice, Only try to debug to the various browsers are displayed normal bar.

ie7.0 and ie6.0 between incompatible, now I know that there are several aspects, such as omission or wrong place, welcome to add or correct in the back.

1. Ie7,ie6 div+css appears with different width definitions

On the width of the definition of the width of the interpretation of different, IE7 width on the IE6 to be a bit wider, it is this reason the page may overflow problems, but fortunately this problem can be changed by the number or modify the percentage to resolve.

2. ie7.0 fixed the bug with!important.

Previously because ie6.0 to!important identification Bug, in Firefox and IE, the box model interpretation of inconsistencies led to a difference of 2px, most of the Web page standard designers through this bug to compatible ie6.0 and Firefox, that is, the use of: div {margin : 30px!important;margin:28px; But ie7.0 this bug to fix, so the problem appeared again, how compatible with ie.7.0 and compatible with ie6.0 and Firefox?

3. Box model Changes

In IE7, the overflow behavior was modified to accommodate the CSS2.1 box model.

4. Some CSS filter in ie7.0 will no longer be available

Many potential parsing errors have been modified in IE7, which may prevent filter from working correctly in previous versions of IE. such as: *html filter, underline filter and/**/annotation filter, and so on.

5. ie7.0 for many irregular CSS no longer support, the JS syntax requirements more stringent specifications.

A lot of IE6 under the normal display of JS page, under the IE7 are not normal display, and no hint error. ie7.0 to JS grammar requirements more stringent norms, but this specification does not seem to explain, also did not understand how they are "regulation" how "fan".