1.如果图片加a标签在IE9-中会有边框
-
img{border:none}
2.rgba不支持IE8
-
opacity:0.7;/*FF chrome safari opera*/
filter:alpha(opacity:70);/用了ie滤镜,可以兼容ie/
但是,需要注意的是,opacity会影响里面元素的透明度
3.display:inline-block ie6/7不支持
-
display:inline-block;
*display:inline;
4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍
解决方案:用css给body添加magin属性为0px
body{margin:0;}
5.IE 6.0 Firefox Opera等是真实宽度=width+padding+border
IE5.X 真实宽度=width
解决方案:
方法1.
div.content { width:400px; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
方法2.
div.content { width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 }
6.height不能小于16px,设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案:
overflow设置为hidden
7.min-height不兼容 ie6 7解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层
解决方案:
min-height:200px; height:auto !important; height:200px; overflow:visible;
8.position:fixed IE5 6无法识别此属性
9.浮动的div有margin_left属性ie6会加倍 无论兼容视图还是无声明视图
方案一: IE6唯一识别属性_的方式加
_display属性_display:inline;
方案二:
10.cursor兼容 自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本
cursor:url(Hand.cur), url(/Hand.cur), auto;
11.png图片 IE6里面的png图片不能透明 兼容版本和无声明版本都是
12.img浮动 img标签打回车会造成每个图片之间有缝隙
解决方案:可以删除之间的回车键也可以让这些图片浮动
13.在IE浏览器下input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式
::-ms-clear,::-ms-reveal{display:none;}
注:IE9-不识别
14.CSS3前缀 -webkit- webkit渲染引擎 chrome/safari
-moz- gecko渲染引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera
动画、过渡、background-size都需要加前缀
动画:
@-webkit-keyframes name{ 0%{动画开始的css样式;} 100%{动画结束的css样式;} } -webkit-animation:name 8s infinite linear;
过渡:
div.box{ bottom:-40px;<br -webkit-transition:all .3s ease-in-out 0s; }
注:但是过渡不兼容IE8-,可以用JS动画实现
background-size同样也不支持IE8,可以考虑用img
渐变:
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+*/ background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/
16.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变
圆角 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); }
阴影 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边框阴影/
}`
背景透明rgba
.box{ background-color:rgba(12, 154, 171, 0.29); behavior: url(css/PIE.htc); -pie-background:rgba(12, 154, 171, 0.29); }
渐变
.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); }
注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级
17.JS实现点击跳转到指定位置
$(".arraw-bt").click(function(){ var scroll_offset = $("#section").offset(); console.log(scroll_offset); $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持 "scrollTop":scroll_offset.top },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果 /});
网友评论