CSS Browser compatibility issue resolution

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= "http://www.php1.cn/" >

!--[If IE 7]〉

!--Suitable for IE7--〉

〈link rel= "stylesheet" type= "Text/css" href= "http://www.php1.cn/" >

〈! [endif]--〉

!--[If LTE IE 6]〉

!--suitable for IE6 and below--〉

〈link rel= "stylesheet" type= "Text/css" href= "http://www.php1.cn/" >

〈! [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 greater than
〉=〉 greater than sign
lt = Less then smaller than
〈=〈 less than sign
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〉

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〉
〈div〉〈/div〉
〈div〉〈/div〉
〈div〉〈/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〉
〈div〉〈/div〉
〈div〉〈/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:e?xpression (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;  This sentence is 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.

