兼容性问题

2021-04-02 20:03:04 阅读：207 来源： 互联网

标签：opacity translate3d transform 内核兼容性问题 position fixed

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

标签：opacity,translate3d,transform,内核,兼容性问题,position,fixed
来源： https://www.cnblogs.com/yuanliy/p/14612266.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9