兼容性问题

2024-04-06 20:40:38

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键盘字母输入，默认首字母大写

解决方案，设置如下属性

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插件解决这个问题

码农公寓