Common compatibility issues

Hack writing specification
Because different browsers to the standard of support is not the same, each browser for the interpretation of the page is not the same, for example, ie in many cases with the FF 3px Gap, for these differences, you need to use CSS hack to adjust, of course, in the absence of necessary circumstances, It is best not to write hack to adjust, to avoid the page problems caused by hack.

IE6, IE7, Firefox compatibility between the wording:
One:
IE can be recognized *; Standard browser (such as FF) is not recognized *;
IE6 recognizes * but does not recognize!important, I
E7 can recognize *, can also recognize !important; FF does not recognize *, but can identify!important;
According to the above expression, CSS
hack under the same class of/ID can be written as:
. searchinput {
Background-color: #333;/* All three are available */
*background-color:# 666!important; /* Only ie7*/
*background-color: #999;/* only IE6 and IE6 below */
}
General three are written in the following order: FF, IE7, IE6.
Two:
IE6 can recognize "_", and IE7 and FF are not recognized, so when the difference between IE6 and IE7 and FF only,
can write like this:
. searchinput {
Background-color: #333 ;/* General */
_background-color: #666;/* Only IE6 recognizable */}
:
*+html and *html are IE specific tags, Firefox is not supported.
. searchinput {background-color: #333;}
*html. searchinput {background-color: #666;} /* Only ie6*/
*+html. searchinput {background-color: #555;} /* Only ie7*/
block IE Browser: Select is the selector and is replaced as appropriate. The second sentence of the
is unique to the Safari browser on your Mac.
*:lang (ZH) select {font:12px!important;}/*ff Private */
Select:empty {font:12px!important;}/*safari visible */
IE6 recognizable: This is primarily a property and value that is separated by a CSS comment before the colon.
Select {Display/*IE6 does not recognize */:none;}

ie if condition hack notation:
All IE can be identified by:
<!–[if ie]> only IE <! [End if]–> only IE5.0 can be identified: <!–[if IE 5.0]> only IE 5.0 <! [End If]–>
IE5.0 shifting IE5.5 can be identified: <!–[if GT ie 5.0]> only ie 5.0+ <! [End If]–>
Only IE6 recognizable: <!–[if lt ie 6]> only ie 6-<! [End If]–>
IE6 and IE6 below ie5.x are recognizable: <!–[if GTE ie 6]> only ie 6/+ <! [End If]–>
Only IE7 recognizable: <!–[if LTE IE 7]> only IE 7/-<! [End If]–>

Clear floating
In Firefox, when the child is floating, then the height of the parent can not completely wrap the entire child, then use this to clear the floating hack to do a definition of the parent, then you can solve the problem.
Select:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

Use the Border property to determine the layout characteristics of an error element
Using the Float property layout is an error when you accidentally make a mistake.
The element boundary is determined by adding the border attribute to the element, which causes the error to be known.

Float:
The parent element of the float element cannot specify a clear property under
Macie if the clear property is used for the parent element of the float element, the layout of the float elements around it is confusing.
This is Macie's famous bug, if you don't know it will make a detour.
Float element must specify the Width property
Many browsers will have a bug when displaying a float element that does not specify width.
So regardless of the contents of the float element, be sure to specify the width property for it.
Use em instead of PX as a unit when specifying elements.
Float element cannot specify properties such as margin and padding
ie has a bug when displaying float elements that specify margin and padding.
Therefore do not specify the margin and padding properties for the float element (you can nest a div inside a float element to set margin and padding). The
can also use the Hack method to specify special values for IE.
The sum of the width of the float element is less than 100%
if the sum of the float element's width is exactly 100%, some old browsers will not display properly. So make sure the sum of the widths is less than 99%.

The div of float must be closed
For example: (where Floata, FLOATB properties have been set to float:left;)
Program Code
< #div id= "Floata" ></#div >
< #div id= "FLOATB" ></#div;
< #div id= " NOTFLOATC "></#div >
The NOTFLOATC here don't want to continue panning, but want to go down.
This code is no problem in IE, the problem is in FF.
Because NOTFLOATC is not a float label, the float label must be closed.
in program code
< #div class= "FLOATB" ></#div,
< #div class= "NOTFLOATC" ></#div >
Plus Program code
< #div class= "clear" ></#div >
This div must be aware of the location of the declaration, must be placed in the most appropriate place,
and must be the same as two with a float attribute of the div sibling, there can be no nested relationship , otherwise an exception is generated.
and define the clear style as follows:
program code. clear{Clear:both;}
In addition, in order to allow the height can automatically adapt, to add overflow:hidden inside the wrapper;
When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private properties (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example, a wrapper is defined as follows: program code. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}

The question of double 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:
< #div id= "imfloat" ></#div >
The corresponding CSS is the program code
#IamFloat {float:left; Margin:5px;/*ie understood as 10px*/Display:inline;/*ie and understood as 5px*/}

Common compatibility issues:
(1) DOCTYPE affects CSS processing
(2) Ff:div set Margin-left, margin-right for Auto is already centered, IE no
(3) Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center
(4) FF: After setting padding, Div will increase height and width, but IE will not, therefore need to set a height and width with!important
(5) FF: Support!important, IE is ignored, can be used!important for FF special setting style
(6) Vertical center of 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
(7) Cursor:pointer can display the cursor finger shape in IE FF simultaneously, hand only IE can
(8) FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee does not break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.
(9), in Mozilla Firefox and IE in the box model interpretation inconsistent lead to 2px solution: div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized.
So in the IE actually explained to this: div{maring:30px;margin:28px} repeated definition, according to the last one to execute, so can not write only margin:xxpx!important;
IE5 and IE6 's box explanations differ
IE5 under program code 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 also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）
(one) UL tag in Mozilla default is padding value, and in IE only margin has value, so first define the program code ul{margin:0;padding:0;}
Be sure to note the indentation, alignment. Have good programming habits.

Common compatibility issues