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;