DIV+CSS Design-time Browser compatibility issues

In this kind of browser display normal, in another kind of chaos, we are writing CSS will be very annoyed, just fixed the browser problem, the result of another browser but a new problem.

What is browser compatibility: When we use a different browser (Firefox IE7 IE6) access to the same Web site, or page, there will be some incompatible problems, in this browser display normal, in another kind of chaos, we are writing CSS will be very angry, Just fixed the problem with this browser, but the other browser has a new problem. OK, I took the line, then I use your incompatible write a section of CSS, let them each implementation of each, hehe.
First,!important (function Limited)
With IE7 support for!important, the!important method is now only for IE6 compatibility. (Note the wording. Remember that the claim position needs to be advanced.)
For example:

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

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

The first thing to know is:

All browsers universal height:100px;
IE6 Special _height:100px;
IE7 Special *+height:100px;
IE6 and IE7 share *height:100px;
IE7 and FF share height:100px!important;

For example:

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

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

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

The following method is simpler

Give 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's important to note that the order of the code must not be reversed or undone. Because the browser in the interpretation of the program, if the duplicate name, will use the back of the cover front, as the variable to assign a reason, so we put the general put in front, the more dedicated to put behind

Explain the 4 code:

When reading the code, the first line height:100px; Everyone is general, IE6 IE7 FF all show 100px
To the second line of *height:300px; FF do not recognize this attribute, IE6 IE7 are recognized, so FF also shows 100px, and IE6 IE7 the first line to get the height of the cover, are displayed 300px
To the third line of _height:200px; only IE6 knew, so IE6 covered the height of the second line and finally showed 200px
In this way, three browsers have their own height properties, and play their own.

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 special 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 the following--〉

〈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 to say

The IF condition hack ie

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 and IE5.5 can be identified. [endif]--〉
5.〈!--[if GT IE 5.0]〉ie5.0 and IE5.0 above can be identified. [endif]--〉
6.〈!--[If IE 6]〉 only IE6 identifiable. [endif]--〉
7.〈!--[If Lt IE 6]〉ie6 and IE6 The following version can be identified. [endif]--〉
8.〈!--[if GTE IE 6]〉ie6 and IE6 versions above can be identified. [endif]--〉
9.〈!--[If IE 7]〉 only IE7 identifiable. [endif]--〉
10.〈!--[If Lt IE 7]〉ie7 and IE7 The following version can be identified. [endif]--〉
11.〈!--[if GTE IE 7]〉ie7 and IE7 versions above can be identified. [endif]--〉 Note: GT = Great Then greater than
〉=〉 Greater than number
lt = Less Then less than
〈=〈 less than number
GTE = Great Then or Equal greater than or equal to
LTE = Less Then or Equal less than or equal to

Four, CSS filter method (according to the author is said to be translated from a foreign classic website)

Create a new CSS style as follows:

#item {

width:200px;

height:200px;

background:red;

}

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

〈div〉some text here〈/div〉

In the body display here The lang attribute is added, Chinese is 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 the lang selector ie7.0 does not support, so it does not have any effect on this sentence, so also achieved the same effect under ie6.0, but unfortunately, Safari also does not support this attribute, 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 still chooses this element, regardless of whether or not this element exists, now the green will now be on browsers other than IE versions.

V. Float closure (clearing float)

Web pages in some browsers display the dislocation is often because of the use of float and not really closed, this is a div can not adapt to the height of a reason. If the parent div is not set float and its child div is set to float, the parent Div cannot wrap the entire child Div, which generally appears under a parent div containing multiple child div. Solution:
1, to the Father Div also set float (don't scold me, I know is nonsense)

2, after all the child div new add an empty div (not recommended, some browsers can see the gap generated by empty Div)

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 closure

Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.
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), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not 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.

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's exact words: the principle is that the outer element is not a good extension, the problem is on the overflow, because overflow not see (see the Interpretation of the world-view). Now as long as you will add a "overflow:auto" to the peripheral elements, you can solve the problem, the result is that in addition to IE, can really solve. Down to solve the problem of IE, coupled with the "_height:1%", the problem is completely resolved.

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

Vi. some of the compatibility details to be noted

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

Solution: to the div set IE, ff two width, in IE's width before adding IE unique mark "*" number.
2, page center problem.

The body {text-align:center} is sufficient under IE, but is not valid under FF.

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

3, sometimes in the IE6 see some strange gap, but our height is clearly set.

Solution: Try adding "font-size:0px" to the div with gaps.

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

5, floating IE6 produced by double distance

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

Solution: Add display:inline, make floating ignore

Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);
#box {display:block;//can simulate an inline element as a block element display:inline//effect of arranging the same row

6 minimum width of the page

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

Solution: To make this command available on IE, you can put a 〈div〉 under the 〈body〉 tab, and then assign a class to the DIV:
Then 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 through JavaScript's judgment.

7, UL and form label padding and margin

The UL label in FF has the padding value by default, but in IE only margin default has the value. Form label in IE, will automatically margin some margins, while in FF margin is 0;

Workaround: CSS is used first in this style ul,form{margin:0;padding:0;} To define the dead, the back will not be for this headache.

8, div floating IE text produces 3 pixel bugs

This is the line I stuck on the web.

The left side of the object floating on the right side of the outer patch to locate the left margin, the right object within the text will be left with 3px spacing.
#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, as long as the right defines the Width property, there will definitely be two lines under FF
The second, two width are defined as a percentage, even if all of the 100% in IE will be one line display. 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 is used.

So the above code is not very useful, at least not in the FF. In fact, as long as the only definition of the left width on the line, right does not define the width on both IE or FF can be successful, but so the Father Div box does not really contain left and right two Div, you can use the 5th way I said above to solve. The easiest way to do that is to add float:left to right and really grind!

9, truncated ellipsis

. hh {-o-text-overflow:ellipsis;
Text-overflow:ellipsis;
White-space:
Nowrapoverflow:hidden;
}
This is to cut out the extra parts of the text after the length and end with an ellipsis. Technology is good technology, many people like to use, but the attention of Firefox does not support.