兼容性问题

1、IE8下面的png图片无法正常显示?

原因:打开调试面板,你会发现IE8浏览器把PNG格式的img解析成了span标签,导致图片无法显示。
解决方案:在央视里面对span设置宽高和display:inline-block;

2、rgba不支持IE8?

解决方案:可以用 opacity
opacity:0.7;/FF chrome safari opera/
filter:alpha(opacity:70);/用了 ie 滤镜,可以兼容 ie/
但是,需要注意的是,opacity 会影响里面元素的透明度

3、css3的新属性?

Trident内核:主要代表为IE浏览器
Gecko内核:主要代表为Firefox FF
Presto内核:主要代表为Opera
Webkit内核:主要代表为Chrome和Safari

对应浏览器的私有属性:
Trident内核:前缀-ms
Gecko内核:前缀-m
Presto内核:前缀-o
Webkit内核:前缀-webkit

4、window.event||event

移动端常见的兼容性问题

1、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。如下:
< a href=" ">400-810-6999 转 1034</ a>
拨打手机如下:
点击拨打

2、上下拉动滚动条时卡顿、慢

body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
Android3+和IOS5+支持CSS的新书行为overflow-scrolling

3、圆角bug

某些Android手机圆角失效
background-clip:padding-box

4、ios设置input按钮样式会被默认样式覆盖

解决方式:
input,textarea{
border:0,
-webkit-apperence:none
}

5.IOS键盘字母输入,默认首字母大写

解决方案,设置如下属性

<input type="text"autocapitalize="off"/>

6.h5底部输入框被键盘遮挡问题

h5页面有个问题是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决

var oHeight = $(document).height(); //浏览器当前的高度

​ $(window).resize(function(){

​ if($(document).height() < oHeight){

​ $("#footer").css("position","static");

​ }else{

​ $("#footer").css("position","absolute");

​ }

​ });

7.IOS移动端click事件300ms的延迟响应

解决方案:

1、fastclick可以解决在手机上点击事件的300ms延迟

2、zepto的touch模块,tap事件也是为了解决在click的延迟问题

3、触摸事件的响应顺序为touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题

8.在ios和andriod中,audio元素和video元素在无法自动播放

应对方案:触屏即播$('html').one('touchstart',function(){audio.play()})

9.CSS动画页面闪白,动画卡顿

解决方法:

1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位

2.开启硬件加速

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

10.fixed定位缺陷

1、ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位

2、android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位

3、ios4下不支持position:fixed解决方案:可用iScroll插件解决这个问题

上一篇:div设置背景颜色添加透明度,内部元素不透明


下一篇:js中使用Tab键可以进行选中,用enter触发点击事件。