CSS browser compatibility problem Solving method Summary

CSS Browser compatible resolutions are summarized below:

1. Several browsers in CSS support different keywords, browser compatibility can be duplicated definition!important can be recognized by Firefox and IE7 * can be IE6, IE7 identification _ can be IE6 recognized *+ can be IE7 recognized

Distinguish between IE6 and ff:background:orange;*background:blue;
Distinguish between IE6 and IE7:background:green!important;background:blue;
Distinguish between IE7 and FF:background:orange; *background:green;
Distinguish Ff,ie7,ie6:background:orange;*background:green!important;*background:blue;
IE7,IE8 compatible: <meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>

The latest compatibility scenarios are as follows:

. e{
Color: #FFF;/* FF,OP */
[; color: #0F0;] /* Sa,ch */
Color: #FFF \9;/*ie6, 7, 8*/
*color: #FF0;/* IE7, 6 */
_color: #F00;/* IE6 */
}

2. Apply the conditional comment, because the browser version of the Internet Explorer for our production of the Web Standard page interpretation is not the same, in particular, the interpretation of the CSS is different, we are compatible with these, we can use conditional comments to define, and finally achieve the purpose of compatibility.

Like what:
<!– default call CSS.CSS style sheet first –>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<!–[if IE 7]>
<!– If IE version is 7, call IE7.CSS style sheet –>
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]–>
<!–[if LTE IE 6]>
<!– If IE browser version is less than or equal to 6, call the IE.CSS style sheet –>
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]–>

This distinguishes between IE7 and IE6 down the browser to the implementation of CSS, to achieve compatibility. At the same time, the first line of the default css.css can also be compatible with other non-IE browser implementations.

Note: The default CSS style should be in the first line of the HTML document, and all content judged by the conditional comment must be behind the default style.

3. Several browsers interpret the actual pixel Ie/opera: The actual width of the object = (margin-left) + width + (margin-right) Firefox/mozilla: The actual width of the object = (margin-left) + (Borde R-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (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 not supported; FireFox:-moz-border-radius:4px; or-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 is <style type= "Text/css" > <!--a:link {} a:visited {} a:hover {} a:active {}--</style> this avoids some super- Links 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 be able to automatically open the solution: Add a CSS clear:both to clear the floating tag after the label ends;

21. Floating after IE6 explain the margin for the actual margin of the double solution: plus Display:inline

There is a void below the IE6 slice solution: Add Display:block to IMG or set Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom

IE6 two layers in the middle of the gap solution: Set the right div is also floating float:left or relative IE6 definition margin-right:-3px;

The display method of ellipsis for content exceeding length in Li <style type= "text/css" > <!--li {width:200px; white-space:nowrap; Text-overflow: ellipsis; -o-text-overflow:ellipsis; Overflow:hidden; --</style> (only available with IE)

25. Set the element height and row height to the same value to center the text vertically <style type= "Text/css" > <!--div {height:30px; line-height:30px;}--</styl E>

26. The text input box must add Vertical-align:middle to the CSS; property settings <style type= "Text/css" > <!--... ... vertical-align:middle; -</style>

27. Web-compliant browsers set fixed height values that do not open up like IE6, but want to set a fixed height and want to be open? The workaround is to remove the height attribute and set the Min-height, In order to be compatible with IE6 that do not support min-height, this can be defined as: {height:auto!important; height:200px; min-height:200px;}

In web standards, ie cannot set the scrollbar color solution: Change the body setting in CSS to HTML <style type= "Text/css" > <!--HTML {scrollbar-face-color:# F6f6f6; Scrollbar-highlight-color: #fff; Scrollbar-shadow-color: #eeeeee; Scrollbar-3dlight-color: #eeeeee; Scrollbar-arrow-color: #000; Scrollbar-track-color: #fff; Scrollbar-darkshadow-color: #fff; -</style>

IE6 because the default row height problem cannot define a container of around 1px Heights, the workaround: Set the container in CSS such as: Overflow:hidden | zoom:0.08 | line-height:1px

30. Set the transparency property for Flash to make the layer appear above flash <param name= "wmode" value= "Transparent"/> <!--solve problems on IE//> <embed wmode= " Transparent "... > <!--solve Firefox problems//>

After Firefox sets the Padding property, the width and height property values are added accordingly, IE will not solve the problem: Define a set of height and width with the!important method

The space between the Div and Div is ignored by Firefox, but IE is processed, so try not to have spaces and carriage returns between the two connected Div, otherwise it may cause incorrect formatting between browsers, such as the famous 3px deviation, and the reason is difficult to find out.

33. Form as follows <div id= "parent" > <div id= "Content" > </div> </div> when content contents are a long time, even if parent sets a height of 100% or auto, under different browsers or not intact automatic stretching; the solution creates a space at the bottom of the layer with a height of 1, the code is as follows <div id= "parent" > <div id= "Content" > </div> <div style= "font:0px/0px sans-serif;clear:both;display:block" > </div> </div>

The size of the font small is interpreted differently by IE and Firefox, and Firefox is 16px in 13px,ie.

IE and Firefox have different size explanations for spaces, and Firefox is 8px in 4px,ie

CSS browser compatibility problem Solving method Summary