CSS compatible solutions for each browser

1. CSS in several browsers to different keywords support, can be repeated browser compatibility definition
!important can be identified by Firefox and IE7
* Can be IE6, IE7 identification
_ can be recognized by IE6
*+ can be identified by IE7
Difference between IE6 and FF:
Background:orange;*background:blue;
Difference between IE6 and IE7:
Background:green!important;background:blue;
Difference between IE7 and FF:
Background:orange; *background:green;
Difference ff,ie7,ie6:
Background:orange;*background:green!important;*background:blue;
IE7,IE8 compatible:
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>

2. IE-specific conditional annotations
<!--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---
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->

3. Explanations of actual pixels by several browsers
Ie/opera: Actual width of object = (margin-left) + width + (margin-right)
Firefox/mozilla: The actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-w Idth) + (margin-right)

4. Mouse gesture problem: Firefox cursor property does not support hand, but support Pointer,ie two support, so in order to be compatible with pointer

5. When you set the Style property of an HTML tag in Firefox, all position, width, and dimension values must be followed by Px,ie, which also supports this notation, so you can uniformly add PX units. such as Obj.Style.Height = ImgObj.Style.Height + ' px ';

6. Firefox cannot parse shorthand padding property settings, such as padding 5px 4px 3px 1px; must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;

7. 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 property is valid for IE, the Padding property is valid for Firefox

8. CSS Control transparency: IE:filter:progid:DXImageTransform.Microsoft.Alpha (STYLE=0,OPACITY=60); firefox:opacity:0.6;

9. CSS control fillet: IE: round corner is not supported;

FireFox:-moz-border-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;

CSS double-line bump border: ie:border:2px outset;

FireFox:
-moz-border-top-colors: #d4d0c8 White;
-moz-border-left-colors: #d4d0c8 White;
-moz-border-right-colors: #404040 #808080;
-moz-border-bottom-colors: #404040 #808080;

IE support CSS Method Cursor:url () custom cursor style file and scroll bar color style; Firefox does not support either of the above

IE has a bug where the select control is always at the top, and all CSS has no effect on the Select control

IE supports label labels in form, including images and text content; Firefox does not support the label containing the picture, and clicking on the picture does not allow the radio or checkbox of the tag label to produce an effect.

TextArea in Firefox does not support Onscroll events

Firefox does not support the inline and block display

Margin-left Firefox to Div settings, Margin-right is auto is already centered, ie does not

When Firefox sets Text-align to body, the DIV needs to be set Margin:auto (mainly Margin-left margin-right) in order to center

18. CSS style settings for hyperlinks are best followed in this order: L-v-h-a. That
<style type= "Text/css" >
<!--
A:link {}
a:visited {}
a:hover {}
a:active {}
-
</style>
This avoids some post-visit hyperlinks that don't have hover and active styles.

In IE, set the long paragraph wrap in CSS to set up Word-wrap:break-word;firefox using JS Insert method to implement, the specific code is as follows:
<script type= "Text/javascript" >
/* <! [cdata[*/
function Tobreakword (el, Intlen) {
var Obj=document.getelementbyid (EL);
var strcontent=obj.innerhtml;
var strtemp= "";
while (Strcontent.length>intlen) {
Strtemp+=strcontent.substr (0,intlen) + "";
Strcontent=strcontent.substr (intlen,strcontent.length);
}
strtemp+= "" +strcontent;
Obj.innerhtml=strtemp;
}
if (document.getElementById &&!document.all) Tobreakword ("div_id", 37);
/*]]> */
</script>

20. After adding a floating property to the sub-container, the container will not automatically open
Workaround: Add a clear floating CSS clear:both to the next tag after the label ends;

