Summary of front-end PC compatibility issues, pc compatibility

Summary of front-end PC compatibility issues, pc compatibility

1. If the image is added with a tag in IE9-, there will be a border

Solution:

img{border:none;}

2. rgba does not support IE8

Solution: opacity can be used

Eg:

Opacity: 0.7;/* FF chrome safari opera */filter: alpha (opacity: 70);/* ie filter, compatible with ie */

However, it should be noted that opacity will affect the transparency of the elements in it.

3. display: inline-block ie6/7 is not supported

Solution:

display:inline-block;*display:inline;

4. If the default body does not have the body removed margin, ie5, 6, and 7 edge will be wide. margin-top doubles. If it is in the non-declared state, all IE browsers will double margin-top.

Solution: Use css to add the magin attribute to the body as 0px.

body{margin:0;}

5. IE 6.0 Firefox Opera and others are true width = width + padding + border

IE5.X true width = width

Solution:

Method 1.

Div. content {width: 400px; // This is the incorrect width (which is correct for ie5). All browsers read voice-family :"\"}\""; // IE5.X/win ignores the voice-family: inherit content after "\"} \ "; width: 300px; // Some browsers including IE6/win read this sentence, and the new value (300px) overwrites the old one}

Method 2.

Div. content {width: 300px! Important; // This is the correct width, most of which are supported! The browser marked by important uses the value width (Space)/**/: 400px; // IE6/win does not parse this sentence, therefore, IE6/win still thinks that the width value is 300px. When IE5.X/win reads this sentence, the new value (400px) overwrites the old one because! Important tag does not work for them}

6. The height cannot be less than 16 PX. Set a smaller height tag (generally less than 10 px). in IE6, IE7, the height in the travel is higher than the height you set.

Solution: Set overflow to hidden.

7. min-height is not compatible with ie6 7, which is explained to be open when the height is exceeded, while other browsers cover the layers below

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

8. position: fixed IE5, 6 cannot recognize this attribute

Solution:

<! -- [If lte IE 6]> <style type = "text/css"> html {/* This can make IE6 non-Jitters when scrolling */background: url (about: black) no-repeat fixed} # demo_t, # demo_ B, # demo_l, # demo_r {position: absolute;} # demo_t, # demo_ B {/* When the body has padding, 100% cannot be full in IE6 */width: expression (offsetParent. clientWidth);}/* the following three rules are used for top computing in IE6 */# 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 with the margin_left attribute ie6 doubles whether it is compatible with the view or does not have a declared view.

Solution:

Solution 1: Add _ display attribute _ display: inline to the unique way that IE6 identifies attribute;

Solution 2:

Condition comment <! -- [If lte IE 6]>
<Style>
. On {display: inline}
</Style>
<! [Endif] -->

10. The cursor is compatible with the image url path in cur format, whether compatible or not.

Solution: cursor: url (Hand. cur), url (/Hand. cur), auto;

The png Image in 11.png image IE6 is not transparent and compatible with both the version and the non-declarative version.

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. If the img floating img label is clicked, there is a gap between each image.

Solution: You can delete the enter keys between the two images or make these images floating.

13. When you click the input type = "text" text box in the IE browser, "X" and type = "password" will be followed by eyes. How to remove these two default styles:

　　

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

Note: IE9-not recognized

14. CSS3 prefix-webkit rendering engine chrome/safari

-Moz-gecko rendering engine firefox

-Ms-trident rendering engine IE

-O-opeck rendering engine opera

Prefix is required for animation, transition, and background-size.

Eg: Animation

@-Webkit-keyframes name {0% {css style starting with the animation;} 100% {css style ending with the animation;}-webkit-animation: name 8 s infinite linear;

Transition:

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

Note: However, the transition is not compatible with IE8-and can be implemented using JS animation.

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

15. Gradient

Solution:

Filter: progid: DXImageTransform. microsoft. gradient (gradientType = 0, startColorStr = #35FEA1, endColorStr = # 6E9DFF);/* IE 6 7 8 */background:-ms-linear-gradient (top, #35FEA1, # 6E9DFF);/* IE 10 */background:-moz-linear-gradient (top, #35FEA1, # 6E9DFF);/* Firefox */background: -webkit-gradient (linear, 0% 0%, 0% 100%, from (#35FEA1), to (# 6E9DFF);/* Google */background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (#35FEA1), to (# 6E9DFF);/* Safari 4-5, Chrome 1-9 */background: -webkit-linear-gradient (top, #35FEA1, # 6E9DFF);/* Safari5.1 Chrome 10 + */background:-o-linear-gradient (top, #35FEA1, # 6E9DFF);/* operators' 11.10 + */

16. PIE. htc can implement compatibility of many CSS 3 attributes in IE, such as rounded corners, shadows, and gradient.

(1) border-radius

.signBtn{    height: 40px;    background-color:#08BCD2;    color: #fff;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    behavior: url(css/PIE.htc);}

(2) shadow box-shadow

. Box {width: 200px; height: 200px;-webkit-box-shadow: 1px 0 10px;-moz-box-shadow: 1px 0 10px; box-shadow: 1px 0 10px; background-color: # fff; behavior: url (css/PIE. htc);/* IE border shadow */}

 

(3) Transparent background rgba

.box{　　 background-color:rgba(12, 154, 171, 0.29);    behavior: url(css/PIE.htc);    -pie-background:rgba(12, 154, 171, 0.29);}

(4) GRADIENT

.box{   width:200px;   height:400px;   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));   background:-moz-linear-gradient(#9F9, #393);   -pie-background:linear-gradient(#9F9, #393);   behavior:url(pie.htc);                }

Note: PIE. the htc file path is relative to the css file, not the html file. the htc file is placed in the same css folder as the css style file, and the corresponding html price is the same as the css folder.

17. JS 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, it is only supported by chrome. Only chrome supports Firefox and ie does not support "scrollTop": scroll_offset.top}, 0 ); // if this parameter is set to 0, the system jumps to the specified position. If this parameter is not set, the system will have a transitional effect /});