1.若是图片加a标签在IE9中会有边框。css
解决办法:html
img{ border:none; }
2.rgba不支持IE8-->使用opacityweb
opacity:0.7;/* ff chrome safari opera*/ filter"alpha(opacity:70)/*兼容ie*/
3.ie6,ie7不支持display:inline-block;chrome
display:inline-block; *display:inline;
;浏览器
4.默认的body是没有去掉margin的,因此在这种状况下,全部的ie浏览器的margin-top就会加倍。因此要给body加上ide
body{ margin:0px; }
5.position:fixed ie五、6没法识别动画
6.浮动的div有margi-left属性的话ie6会加倍,不管兼容视图仍是无声明视图。url
方案一: IE6惟一识别属性_的方式加_display属性_display:inline;spa
方案二:条件注释firefox
<!--[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
八、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;