前端 PC端兼容性问题总结

Posted 2020-08-27 juqian

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

　　解决方案:

img{border:none;}

2.rgba不支持IE8

　　解决方案:可以用 opacity

　　 eg:

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无法识别此属性

　　解决方案:

<!--[if lte IE 6]>
　　　<style type="text/css">
　　　　　 html {
　　　　　　　　/*这个可以让IE6下滚动时无抖动*/
　　　　　　　　background: url(about:black) no-repeat fixed
　　　　　　}
　　　　　　#demo_t, #demo_b, #demo_l, #demo_r {
　　　　　　　　position: absolute;
　　　　　　}
　　　　　　#demo_t, #demo_b {
　　　　　　　　/*这个解决body有padding时，IE6下100%不能铺满的问题*/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}

　　　　　　/*下面三组规则用于IE6下top计算*/
　　　　　　#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.浮动的div有margin_left属性ie6会加倍  无论兼容视图还是无声明视图 

　　解决方案:

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

　　　　方案二:

　　　　　　条件注释<!--[if lte IE 6]>
　　　　　　<style>
　　　　　　　　.on{ display:inline }
　　　　　　</style>
　　　　　　<![endif]-->

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

　　解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.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]-->

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 都需要加前缀

　　eg: 动画

 @-webkit-keyframes name{
　　　　0%{动画开始的css样式;}
　　　　100%{动画结束的css样式;}
　}
-webkit-animation:name 8s infinite linear;

　过渡:

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

注:但是过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8,可以考虑用img

15.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写上会一下跳转到指定位置,若不写会有过渡效果
   /});