Summary of front-end PC-side compatibility issues

1. If the picture plus a tag will have a border in the ie9-

Solution:

Img{border:none;}

2.rgba does not support IE8

Solution: You can use opacity

eg

opacity:0.7; /* FF Chrome Safari Opera */ Filter:alpha (opacity:70); /* with IE filter, can be compatible with IE */

However, it is important to note that opacity can affect the transparency of the elements inside.

3. Display:inline-block IE6/7 does not support

Solution:

Display:inline-block;*display:inline;

4. The default body does not have the body to remove the margin case IE5, 6, 7 Edge will be wide margin-top double if in an undeclared state then all IE browser Margin-top doubled

Solution: Add the Magin property to the body with CSS 0px

body{margin:0;}

5.IE 6.0 Firefox Opera is true width =width+padding+border

IE5. X true Width =width

Solution:

Method 1.

{ width:400px;   //This is the wrong width (for IE5 is correct), all browsers read the voice-family: "\"}\ "";  IE5. 　　X/win ignored the "\"}\ "" after the content voice-family:inherit; width:300px;  Some browsers, including Ie6/win, read this sentence, and the new value (300px) overwrites the old}

Method 2.

{ width:300px!important;   //This is the correct width, most of the browsers that support!important tag use the value here width (space)/**/:400px;   }

6.height can not be less than 16px, set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond their own set height

Solution: Overflow set to hidden

7.min-height incompatible IE6 7 is interpreted to be stretched beyond height, while other versions of the browser cover the layers below

Solution: min-height:200px; Height:auto!important; height:200px; overflow:visible;

8.position:fixed IE5, 6 does not recognize this property

Solution:

<!-- [If LTE IE 6]> <style type= "text/css" > HTML {/* This allows the IE6 to scroll without dithering */Background:url (about:　　　　　　Black) no-repeat Fixed} #demo_t, #demo_b, #demo_l, #demo_r {position:absolute; 　　　　　　} #demo_t, #demo_b {/* This solution body has padding, IE6 under 100% can not be covered by the problem */width:expression (offsetparent.clientwidth);　　　　　　}/* The following three sets of rules are used for IE6 bottom top calculation */#demo_l, #demo_r {top:expression (offsetparent.scrolltop + 300);　　　　　　} #demo_t {top:expression (offsetparent.scrolltop);　　　　　　} #demo_b {top:expression (offsetparent.scrolltop + offsetparent.clientheight-offsetheight); } </style>
<! [EndIf]  -

9. The floating div has the Margin_left property IE6 doubles whether the view is compatible or no declaration

Solution:

Scheme one: IE6 the only way to identify attributes _ and _display attribute _display:inline;

Scenario Two:

Conditional comments <!--[if LTE IE 6]>
<style>
. on{Display:inline}
</style>
<! [endif]-->

10.cursor compatible custom pointer cur format Picture URL path problem Whether it is a compatible or non-declarative version

Solution: Cursor:url (hand.cur), url (/hand.cur), auto;

11.png picture IE6 The PNG image in the non-transparent compatible version and no declaration version are

Solution:

<!--　　　　　　　　[If IE]> <style type= "Text/css" > #DIVname {background:none;　　　　　Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (Enabled=true, Sizingmethod=scale, src= "Pngtouming.png" } </style><! [EndIf]  -

12.img floating img Tag Enter will cause a gap between each picture

Solution: You can delete the ENTER key between the can also let these pictures float

13. In IE browser input type= "text" text box will appear after the "X", and type= "password" will appear after the eyes, how to remove the two default styles:

　　

::-ms-clear,::-ms-reveal{display:none;}

Note: ie9-does not recognize

14.CSS3 prefix-webkit-webkit rendering engine Chrome/safari

-moz-gecko Rendering Engine Firefox

-ms-trident Rendering Engine IE

-o-opeck Rendering Engine Opera

Animations, transitions, background-size all need to be prefixed

Eg: animation

@-webkit-keyframes name {　　　　0%{animation starts with CSS style;} 100% { The CSS style at the end of the animation;} }-webkit-animation:name 8s infinite linear;

Transition:

div.box{bottom:-40px;
　　  -webkit-transition:all. 3s ease-in-out 0s;}

Note: But the transition is not compatible with ie8-, can be implemented with JS animation

Background-size also does not support IE8, you can consider using img

15.JS implementation Click to jump to the specified location

$ (". ARRAW-BT"). Click (function() {    var scroll_offset = $ ("#section"). Offset ();     Console.log (scroll_offset);     $ ("body,html"). Animate ({// If only the body is written, Chrome only supports Firefox and IE does not support     " ScrollTop ": Scroll_offset.top     },0); // here 0 write will jump to the specified position, if not write there will be a transition effect   /});

　　

Summary of front-end PC-side compatibility issues