CSS Browser compatibility issue resolution

One,!important (limited function)

With IE7 correct!important support, the!important method is now only IE6 compatible. (Note the wording.) I remember the position that this sentence needs to advance.
:

#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;

Like what:

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

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

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

The following methods are relatively simple

Give a few examples:

1, Ie6-ie7+ff

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
In fact, the first method described 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 not the same

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

It is important to note that. The order of the code must not be reversed. Or else it'll all be wasted. As the browser interprets the program, assuming the same name, it will be covered in the back of the previous. It's like assigning a value to a variable. So we put the generic put in front, the more dedicated the more put back

Explain the code for 4:

When you read 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 property. 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, finally show 200px
In this way, three browsers have their own height property, each play each of the bar

So if you're not clear, either you go to the wall, or I go! It's just better if you go.

Oh, I almost forgot to say:
*+html compatibility with IE7 must ensure that the top of the HTML has such as 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 staring

!--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 be able to identify! [endif]--〉
4.〈!--[If IE 5]〉 only IE5.0 and IE5.5 can identify! [endif]--〉
5.〈!--[if GT IE 5.0]〉ie5.0 and IE5.0 above can be recognized! [endif]--〉
6.〈!--[If IE 6]〉 only IE6 recognizable! [endif]--〉
7.〈!--[If Lt IE 6]〉ie6 and IE6 below the version number is recognizable. [endif]--〉
8.〈!--[if GTE IE 6]〉ie6 and IE6 above version number is recognizable! [endif]--〉
9.〈!--[If IE 7]〉 only IE7 recognizable! [endif]--〉
10.〈!--[If Lt IE 7]〉ie7 and IE7 below the version number is recognizable. [endif]--〉
11.〈!--[if GTE IE 7]〉ie7 and IE7 above version number is 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 site translated by said)

Create a new CSS style such as the following:

#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 here in body performance, Chinese for zh:

〈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 there is no matter what effect on this sentence, so also achieve the same effect ie6.0, but unfortunately, Safari does not support this property, So you need to add the following CSS style:

#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 the IE version number.

V. Float closure (clearing float)

Web pages appear misaligned on some browsers very often due to the use of float instead of a real closure, which is one reason why the DIV is not adaptive to height.

Assuming that 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 includes a parent div under which there are multiple sub-div. The workaround:
1, to the parent Div also set on float (do not scold me.) I know it's nonsense)

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

Example:

. 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, to the need to close the div plus class= "clearfix" can be, tried.
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 saw. 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 says: The principle is. The reason why the peripheral elements cannot be extended very well is that the problem is overflow. Because the overflow is not visible (see the explanation of the ...).

Now just to add a "overflow:auto" to the peripheral elements, you can solve this problem, the result is in addition to IE. Really can solve. Down to solve the problem of IE, coupled with the "_height:1%", the problem is completely conquered.

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

Vi. some of the compatibility details that need attention

1, FF setting padding after the div will cause width and height to be added (Div's actual width =div width +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.

Solution: 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;
}
Under such circumstances, IE6 will produce a distance of 200px.

Workaround: Add display:inline to make floating ignore

Here is a 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;//ability to 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. It can specify that the element is minimum or less than a certain width. This will ensure 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 is a big problem, assuming that only the width and height, the normal browser of these two values will not change, assuming that only with min-width and min-height, ie, the following is basically 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, you can put a 〈div〉 on the 〈body〉 tab, and then 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. This is only recognized by IE. This will also make your HTML document less formal. It actually uses JavaScript inference to achieve the minimum width.

7. Padding and margin of UL and form label

The UL tag has padding value in FF, but only margin in IE has value by default. form tags in IE, will be actively margin some margin, and in the FF margin is 0.

Workaround: 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 stuck 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 the above code. Here's what I understand:

First, just right defines the width property. The two lines will definitely be 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 phrase "This is the key" is useless at all. Do not add to the line, unless you define the width of the value to be used.

So the above code is of little use, at least not in FF. In fact, only the width of the left can be defined. Right does not define width in either IE or FF can be successful, but the parent div box does not really include the left and right two sub-Div, can use the 5th method I said above to solve. The simplest way is to add float:left to right and OK. It's so abrasive!

9, truncated word ellipsis

. hh {-o-text-overflow:ellipsis;
Text-overflow:ellipsis;
White-space:
Nowrapoverflow:hidden;
}
This is the more out of the length of the self-cut off the portion of the text. And ends with an ellipsis. Technology is good technology, many people like to provoke, but please note that Firefox does not support.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

CSS Browser compatibility issue resolution