Issues that affect the compatibility of your site

FAQ One:

1.DOCTYPE Impact CSS Processing

2.ff:div Settings Margin-left, Margin-right Auto is already centered while IE is not

3.ff:body Settings Text-align, the DIV needs to be set Margin:auto (mainly margin-left,margin-right) in order to center

4.FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important

5.FF: Support!important,ie is ignored, can be used!important for FF special style, it is worth noting that xxxx!important this sentence must be placed on top of another sentence

6.div Vertical centering problem: vertical-align:middle; increases the line spacing to the same height as the entire Div line-height:200px;

Then insert the text and center it vertically. The disadvantage is to control the content not to break the line

7.cursor:pointer can display the cursor finger in IE, FF at the same time, hand only IE can recognize

8.FF: Link with border and background color, need to set Display:block, and set Float:left guarantee does not break line. Refer to menubar, set the height of a and menubar to avoid the bottom edge display dislocation,

If you do not set the height, you can insert a space in the menubar.

9. Inconsistent interpretation of box model in Firefox and IE results in 2px difference

Workaround: div{margin:30px!important;margin:28px;} Note that the order of the two margin must not be written in reverse,

!important This property IE is not recognized, but other browsers can recognize it. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX} repeated definition, according to the last one to execute, so can not write only margin:xxpx!important;

10.ie5 and IE6 's box explain 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,

The widths on IE6 and other browsers are calculated with 300px+10px (right padding) +10px (left padding) =320px.

At this point we can make the following changes

div{width:300px!important;width:340px;margin:0 10px 0 10px}

About this is what I do not understand, only know IE5 and Firefox are supported but IE6 not support, if anyone understand, please tell me, thank you!

11.UL tags in mozilla default is padding value, and in IE only margin has value, so first define ul{margin:0;padding:0;} Will solve most of the problems.

FAQ Two:

Iebox-model this notorious bug existed in every previous version of Ie6/win until Tantak released the most widely circulated hack before being tamed http://www.tantek.com/CSS/Examples/ Boxmodelhack.html

IE5. X/win to Box-model the same, they think width includes the border (border) and filler (padding), fortunately, the situation in the IE6 has improved,

But IE6 is backwards compatible and also contains previous errors,

IE6 actually has two cores, and he still shows tolerance for errors before the old pages, and IE6 can accept the correct Box-model only if the document type (DOCTYPE) declaration is strictly added to the document.

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

div.content{width:400px;

This is the wrong width, all browsers read the voice-family: "\"}\ "";

IE5. X/win the contents of "\"}\ "" are ignored

voice-family:inherit;width:300px;

Some browsers, including Ie6/win, read this sentence, and the new value (300px) overwrites the old}

Html>body.content{//html>body is the CSS2 width:300px;

Support CSS2 The browser was fortunate enough to read this sentence}

Now go back to the topic, we often see!important and (space)/**/: combination of use, what is the secret of this writing? Look at that writing, I can provide another way to do this.

Div.content{width:300px!important;

This is the correct width, most of the browsers that support!important tag use the numeric width (space)/**/:400px here;

Ie6/win Not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win read this sentence, the new value (400px) overwrite the old, because the!important tag does not work for them}

Html>body.content{//html>body is CSS2 's writing width:300px;//support CSS2 the way the browser was fortunate enough to read this sentence}

Again, this method must still rely on the correct document type declaration to work properly, as explained earlier.

A document type declaration is like a switch that opens backward compatible future, and when used incorrectly, is a pandorabox note:

1. The div of float must be closed.

For example:

(where the properties of Floata, FLOATB are already set to Float:left;) < #divid = "Floata" >< #divid = "FLOATB" >< #divid = "NOTFLOATC" >

Here's

Notfloatc

Don't want to continue panning, but want to go down.

This piece of code is

Ie

There is no problem, the problem is

Ff

。

Reason is

Notfloatc

Not

Float

Label, you must add

Float

Label

Closed.

<

#div

class= "FLOATB" >

<

#div

class= "NOTFLOATC" >

Added between

<

#div

class= "Clear" >

This one

Div

Be sure to note the location of the Declaration,

Must be put in the most appropriate place,

And there must be a two with

Float

property of

Div

A sibling cannot have a nested relationship, or an exception will occur.

and will

Clear

This style is defined as follows:

. clear{

Clear:both;}

In addition, in order for the height to automatically adapt,

Wrapper inside add Overflow:hidden;

When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private properties

With Zoom:1, can be done, so that the compatibility is achieved.

For example

A certain wrapper is defined as follows:

. colwrapper{

Overflow:hidden;

Zoom:1;

margin:5px Auto;}

2. Double the issue of margin.

A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.

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

For example:

< #divid = "Imfloat" >

The corresponding CSS is

#IamFloat {

Float:left;

margin:5px;

/*ie understood as 10px*/

Display:inline;

/*ie under the 5px*/}

3, about the containment of the container relationship

Many times, especially when there are parallel layouts in the container, such as two or three float's Div, the width is prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy.

4, about the height of the problem

If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, but if it is static content,

The height is best set.

5, the most ruthless means

!important;

If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will ignore it.

As follows

. tabd1{

Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important;

/*styleforff*/

Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px;

/*styleforie*/}

It is important to note that you must

Xxxx!important

This sentence is placed on top of another sentence, which has been mentioned above.

Other:

Note: IE can recognize *;

Standard browser (

such as Firefox,opera,netscape) is not recognized *;

IE6 can recognize *, but can not recognize the!IMPORTANT,IE7 can recognize *, but also to identify!important; FF does not recognize *, but can identify!important;

Write two lines of code to control an attribute, the difference

Firefox and IE6:

Background:orange;*background:blue;

This code is written out, when you use Firefox or other non-ie browsing, you will find that the area where the code is written is orange, if you use IE to browse, but is blue, this is because IE can recognize *;

Standard browser

(such as Firefox,opera,netscape) does not recognize *; write two lines of code to control an attribute, distinguishing between IE7 and IE6:

Background:green

!important;background:blue;

This code is written out, you use IE7 browsing, you will find that the area where the code is written is green, if you use IE6 to browse, but is blue, this is because IE7 can identify!important*, one but recognized, on the implementation, ignoring the back of that sentence, but IE6 is not recognized! Important

, so the front part is skipped and the second half is executed directly.

Write two lines of code to control an attribute that distinguishes Firefox from IE:

Background:orange;

*background:green;

This code is written out, you use Firefox to browse, you will find the background is orange, and IE is green, very simple, because Firefox does not recognize *, and ie6,ie7 can know *

Write three lines of code to control an attribute, distinguishing firefox,ie7,ie6:

Background:orange;*background:green

!important;*background:blue;

This sentence will be in Firefox, the background is orange, greenin the IE7, blue in theIE6 , the same reason as before,

Firefox does not recognize *, so the following two sentences are not executed, directly execute the first sentence,

IE7 Of course can also execute the first line of code, but because the second sentence, he can also identify, so executed the second sentence code, the previous effect to filter, and the last sentence,

The IE7 is not recognizable. IE6 does not recognize !imprtant

, originally ran the first sentence of code, the second sentence can not be recognized, then the rationale for the implementation of the last sentence.

Issues that affect the compatibility of your site