pc+chrome+html5,前端兼容问题总结(pc端)-CSDN博客

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

解决方案:

img{border:none;}

2.rgba不支持IE8

解决方案:可以用 opacity

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)覆盖掉了旧的

}

方法：

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.img浮动 img标签打回车会造成每个图片之间有缝隙

解决方案:可以删除之间的回车键也可以让这些图片浮动

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

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

注:IE9-不识别

12.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:name8s infinite linear;

过渡:

div.box{

bottom:-40px;

-webkit-transition:all.3s ease-in-out0s;

}

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

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

13.JS实现点击跳转到指定位置

$(".arraw-bt").click(function(){

varscroll_offset = $("#section").offset();

console.log(scroll_offset);

$("body,html").animate({ //如果只写body,只被chrome支持只被chrome支持 Firefox和ie不支持

"scrollTop":scroll_offset.top

},0); //此处0写上会一下跳转到指定位置,若不写会有过渡效果

/});