Turn CSS multi-browser compatibility issues and solutions

key to compatibility processing
1. DOCTYPE affects CSS processing
2, FF: Set padding, div will increase height and width, but IE will not, it is necessary to use!important to set a height and width
3, FF: Support!important, IE is ignored, can be!important for FF special set style
4, the vertical center div problem: Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
5, in Mozilla Firefox and IE in the box model interpretation inconsistent lead to 2px resolution method:
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 be recognized. So under IE it is actually interpreted as:
DIV{MARING:30PX;MARGIN:28PX}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;
Browser Differences
1, UL and ol list indent problem
Eliminate the UL, OL and other list of indentation, the style should be written as: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the Padding property is valid for Firefox.
[note] experience, in IE, set margin:0px can remove the list of the upper and lower left and right indent, blank and list number or dot, set padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower spaces, set padding : Only the left and right indents can be removed after 0px, and List-style:none must be set to remove the list number or dot. In other words, in IE, only set margin:0px can achieve the final effect, and in Firefox must be set margin:0px, padding:0px and list-style:none three items to achieve the final effect.
2, CSS transparency issues
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below.
3, CSS fillet problem
Ie:ie7 The following versions do not support rounded corners.
FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;- moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;.
[note] The fillet problem is a classic problem in CSS, and it is recommended to use the jquery frameset to set the fillet, leaving these complex questions to others. However, the rounded corners of jquery only see rounded corners that support the entire area, there are no rounded corners that support the border, but the rounded corners of this border can be achieved by some simple means, the next opportunity to introduce.
4, Cursor:hand VS cursor:pointer
Problem Description: Firefox does not support hand, but IE supports pointer, both are hand-shaped instructions.
Workaround: Use pointer uniformly.
5. Different font size definitions
The definition of font size small different, Firefox is 13px, and IE in 16px, the difference is quite large.
WORKAROUND: Use the specified font size such as 14px.
Between a div and a div with multiple elements (images or links) arranged in parallel, the spaces and carriage returns in the code are ignored in Firefox, whereas in IE the spaces are displayed by default (about 3px).
6. CSS double-line bump border
ie:border:2px outset;.
FF:-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors: #404040 # 808080;-moz-border-bottom-colors: #404040 #808080;
Browser Bug
1, IE's bilateral distance bug
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
Solution: Add display:inline to this div;
For example:
< #div id= "Imfloat" >
The corresponding CSS is
The following is the referenced content:

#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie to understand the 5px*/
}
#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie to understand the 5px*/
}

There are too many questions about CSS, and even the same CSS definitions are not displayed in different page standards. A development recommendation is that the page is written using standard XHTML standards, with less table,css defined as much as possible in accordance with the standard DOM, while taking into account the main browsers such as IE, Firefox, opera and so on. In many cases, the CSS interpretation standards of FF and opera are closer to the CSS standard and more prescriptive.
2, ie selector space bug
Today, when you set the first character style for a blog's paragraph style, it turns out that a space can also invalidate the style.
Take a look at the following code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >
<title></title>
<style type= "Text/css" >
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-
</style>
<body>

<p> to the world you may be one person, but to one person you may be the world. Never frown, even when you are sad, because you never know who is falling in love with your smile. </p>
</body>

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" >
<title></title>
<style type= "Text/css" >
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-
</style>
<body>
<p> to the world you may be one person, but to one person you may be the world. Never frown, even when you are sad, because you never know who is falling in love with your smile. </p>
</body>

This code for <p> 's first character style definition on IE6 is not effective (IE7 not tested), and in P:first-letter and {font-size:300%} plus a space, that is p:first-letter {font-size : 300%}, the display is normal. But the same code, in Firefox, looks normal. According to the truth, p:first-letter{font-size:300%} is the correct way to do that. So where does the problem go? The answer is the hyphen "-" in the pseudo-class. IE has a bug, when dealing with pseudo-classes, if the name of the pseudo-class with a hyphen "-", the Pseudo-class name followed by a space, or the definition of the style is invalid. In the FF, the addition of spaces can be handled normally.

How to resolve IE compatibility issues

The so-called browser compatibility problem, refers to because different browsers on the same code has different parsing, resulting in the page display effect is not uniform situation, in most cases, our demand is that no matter what browser users use to view our site or login to our system, should be a unified display effect. With the increase of browser version, it is important to solve the compatibility of IE browser.

First,!important (limited function)
With IE7 support for!important, the!important method is now only for IE6 compatibility. (Note the wording. Remember that the statement location needs to be advanced.)
For example:

#example {
width:100px!important; /* IE7+FF */
width:200px; /* IE6 */
}

Second, the CSS hack method (Novice can see, master will be passing it)

The first thing you need to know is:

All browsers universal height:100px;
IE6 Special _height:100px;
IE7 Special *+height:100px;
IE6, IE7 common use *height:100px;
IE7, FF shared with height:100px!important;

For example:

#example {height:100px;}/* FF */

* HTML #example {height:200px;}/* IE6 */

*+html #example {height:300px;}/* IE7 */

The following method is relatively simple

For a few examples:

1, Ie6-ie7+ff

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
In fact, the first method mentioned above can also
#example {
height:100px!important; /* FF+IE7 */
height:200px; /* IE6 */
}

2, Ie6+ie7-ff

#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

3, Ie6+ff-ie7

#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4, IE6 IE7 FF are different

#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
Or:
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

It should be noted that the order of the code must not be reversed, or else naught. Because the browser in the interpretation of the program, if the same name, will be covered in the back of the previous, as if the variable is assigned a reason, so we put the general of the front, the more dedicated to put the back

Explain the code for 4:

When reading the code, the first line height:100px; Everyone is universal, IE6 IE7 FF all display 100px
To the second row of *height:300px; FF does not recognize this attribute, IE6 IE7, so FF also display 100px, and IE6 IE7 the first row to get the height property to cover, all display 300px
To the third row _height:200px; only IE6 know, so IE6 again covered the height in the second row, the final display 200px
In this way, three browsers have their own height property, each play each of the bar

So if you don't understand, either you go to the wall or I go! But it's better if you go.

Oh, I almost forgot to say:
*+html compatibility with IE7 must ensure that the top of the HTML has the following declaration:
〈! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd"

Third, the use of IE-specific conditions note

!--Other Browsers--〉

〈link rel= "stylesheet" type= "Text/css" href= "Css.css"/〉

!--[If IE 7]〉

!--Suitable for IE7--〉

〈link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/〉

〈! [endif]--〉

!--[If LTE IE 6]〉

!--suitable for IE6 and below--〉

〈link rel= "stylesheet" type= "Text/css" href= "Ie.css"/〉

〈! [endif]--〉

Looks like to make up three sets of CSS, I have not used, first stick over and say

ie if condition hack

1.〈!--[if! Ie]〉〈!--) Except IE can be recognized!-- [endif]--〉
2.〈!--[If ie]〉 all IE recognizable! [endif]--〉
3.〈!--[If IE 5.0]〉 only IE5.0 can be identified! [endif]--〉
4.〈!--[If IE 5]〉 only IE5.0 with IE5.5 can be recognized! [endif]--〉
5.〈!--[if GT IE 5.0]〉ie5.0 and IE5.0 above can be identified! [endif]--〉
6.〈!--[If IE 6]〉 only IE6 recognizable! [endif]--〉
7.〈!--[If Lt IE 6]〉ie6 and IE6 The following versions are recognizable! [endif]--〉
8.〈!--[if GTE IE 6]〉ie6 and IE6 above are recognizable! [endif]--〉
9.〈!--[If IE 7]〉 only IE7 recognizable! [endif]--〉
10.〈!--[If Lt IE 7]〉ie7 and IE7 The following versions are recognizable! [endif]--〉
11.〈!--[if GTE IE 7]〉ie7 and IE7 above are recognizable! [endif]-〉

Note: GT = Great Then

lt = Less Then
GTE = Great then or Equal is greater than or equal to
LTE = Lesser then or Equal is less than or equal to

Iv. CSS Filter method (according to the author said from a foreign classic website translation)

Create a new CSS style as follows:

#item {

width:200px;

height:200px;

background:red;

}

Create a new div and use the style of the CSS that you defined earlier:

〈div〉some text here〈/div〉

Add the lang attribute to the body expression, in Chinese en:

〈body lang= "en"

Now define a style for the DIV element:

*:lang (en) #item {

Background:green!important;

}

This is done in order to overwrite the original CSS style with!important, because: lang selector ie7.0 does not support, so this sentence will not have any effect, so also achieved the same effect ie6.0, but unfortunately, Safari also does not support this property, So you need to add the following CSS styles:

#item: Empty {

Background:green!important

}

: The empty selector is a CSS3 specification, and although Safari does not support this specification, it will still be selected, whether or not this element exists, and now the Green will now be on a browser other than IE versions.

V. Float closure (clearing float)

Web pages appear to be misaligned on some browsers many times because of the use of float instead of really closed, which is one reason the div cannot adapt to height. If the parent div is not set to float and its sub-div is set to float, the parent Div cannot wrap the entire sub-div, which typically appears under a parent div with multiple sub-div. Workaround:
1, to the Father Div also set on float (Don't scold me, I know is nonsense)

2. Add a new empty div after all sub-div (not recommended, some browsers can see empty div generated gap)

Like what:

. parent{width:100px;}
. son1{float:left;width:20px;}
. son2{float:left;width:80px;}
. clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

〈div class= "Parent"
〈div class= "Son1" 〉〈/div〉
〈div class= "Son2" 〉〈/div〉
〈div class= "Clear" 〉〈/div〉
〈/div〉

3, Universal float closed

Add the following code to the global CSS and add class= "Clearfix" to the div that needs to be closed.
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〉

: After (pseudo-object), what happens after the object is set, usually used in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. This is the most troublesome.

4, Overflow:auto (just see, highly recommended)

Just add Overflow:auto to the parent div's CSS to get it done.

Example:

. Parent{width:100px;overflow:auto}
. son1{float:left;width:20px;}
. son2{float:left;width:80px;}

〈div class= "Parent"
〈div class= "Son1" 〉〈/div〉
〈div class= "Son2" 〉〈/div〉
〈/div〉

The author said: The principle is that the peripheral elements are not very good extension, the problem is in the overflow, because overflow is not visible (see the explanation of the world). Now just add a "overflow:auto" to the peripheral elements, you can solve the problem, the result is in addition to IE, can really solve. Come down to solve the problem of IE, plus "_height:1%", this problem is completely solved.

I tried, actually do not add "_height:1%" under IE also line, keep it.

Vi. some compatibility details to be aware of

1, FF setting padding after the div will cause width and height to increase (the actual width of the div =div wide +padding), but IE will not.

Solution: to the div set IE, ff two width, in the width of IE with IE special mark "*" number.
2, the center of the page problem.

body {text-align:center;} is sufficient under IE, but the FF fails.

Solution: Add "margin-right:auto; Margin-left:auto; "

3, sometimes in the IE6 saw some strange gap, but we are highly clearly set up AH.

Workaround: Try adding "font-size:0px;" to the div with the gap.

4, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.

5, double distance generated by floating IE6

#box {float:left;
width:100px;
margin:0 0 0 100px;
}
In this case, IE6 will produce a distance of 200px.

Workaround: Add display:inline to make floating ignore

Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element);
#box {display:block;//You can simulate an inline element as a block element display:inline;//Achieve the same row arrangement effect

6 minimum width of the page

Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height. For example, to set the background image, this width is more important.

Workaround: To make this command available on IE, place a 〈div〉 under the 〈body〉 tab and specify a class for the DIV:
Then the 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 by JavaScript's judgment.

7. Padding and margin of UL and form label

The UL tag has a padding value in FF, and only margin in IE has a value by default. Form label in IE, will automatically margin some margin, and in the FF margin is 0;

Workaround: The CSS first uses this style ul,form{margin:0;padding:0;} Given the definition of death, the back will not be a headache for this.

8, div floating IE text generated 3 pixel bug

Here's the one I glued on the internet.

The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left.
#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〉

For this piece of code, here's what I understand:

First, as long as right defines the width property, two lines are absolutely displayed under FF
The second, two width are defined as a percentage, even if all 100% under IE will also be displayed in a row. So the above sentence of the so-called "This is the key" is useless, do not add also in a row, unless you define the width of the value to be used.

So the above code is not very useful, at least not under the FF. In fact, as long as only define the left width on the line, right does not define width in either IE or FF can be successful, but so the parent div box does not really contain the left and right two sub-div, you can use the 5th method I said above to solve. The simplest way is to add float:left in right, it's really grinding!

9, truncated word ellipsis

. hh {-o-text-overflow:ellipsis;
Text-overflow:ellipsis;
White-space:
Nowrapoverflow:hidden;
}
This is the longer the length will be the self-cutting off the extra portion of the text, and end with an ellipsis. Technology is good technology, many people like to mess with, but note that Firefox does not support.

Turn CSS multi-browser compatibility issues and solutions