前端PC端兼容性问题

1.如果图片加a标签在IE9中会有边框。

解决办法：

img{

    border:none;

}

 

 

2.rgba不支持IE8-->使用opacity

opacity:0.7;/* ff chrome safari opera*/

filter"alpha(opacity:70)/*兼容ie*/

 

3.ie6,ie7不支持display:inline-block;

display:inline-block;

*display:inline;

;

 

4.默认的body是没有去掉margin的，所以在这种情况下,所有的ie浏览器的margin-top就会加倍。所以要给body加上

body{

    margin:0px;

}

 

5.position:fixed ie5、6无法识别

 

 

 

6.浮动的div有margi-left属性的话ie6会加倍，无论兼容视图还是无声明视图。

方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

方案二:条件注释

<!--[if lte IE 6]>

　　　　　　<style>

　　　　　　　　.on{ display:inline }

　　　　　　</style>

　　　　　　<![endif]-->

 

 

插播一条

判断ie版本（要在html里面）

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

<!--[if IE 7]> 仅IE7可识别 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

<!--[if IE 8]> 仅IE8可识别 <![endif]-->

<!--[if IE 9]> 仅IE9可识别 <![endif]-->

 

 

7.cursor兼容：自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

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

 

8、png图片，ie6里面的png图片不能透明

<!--[if IE ]>

　　　<style type="text/css">

　　　　　#DIVname{

　　　　　　　　background:none;

　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"

　　　　　}

 

　　　</style>

<![endif]-->

 

9.img浮动

img标签如果后面有一个回车会导致图片之间有缝隙

解决办法：删除回车键

 

10.在ie浏览器下，input type=text文本框点击时后面会出现“X”,以及type=password后面会出现眼睛，如何去除这两种默认样式

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

 

11.CSS3前缀  -webkit-  webkit渲染引擎  chrome/safari

　　　　　　   -moz-   gecko渲染引擎   firefox

　　　　　　   -ms-    trident渲染引擎  IE

　　　　　　   -o-  　opeck渲染引擎　opera　　　　

　　动画、过渡、background-size 都需要加前缀

 

 

12.渐变

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); /*火狐*/

    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/

    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+*/

 

.圆角矩形

-webkit-border-radius: 3px;

    -moz-border-radius: 3px;

 

阴影

　　-webkit-box-shadow:1px 0 10px;

　　-moz-box-shadow:1px 0 10px;

　　box-shadow: 1px 0 10px;