zoukankan      html  css  js  c++  java
  • 兼容性问题

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

  • 相关阅读:
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    SVN分支
    SVN分支
    SVN 版本回退
    SVN 版本回退
    如何在excel中取消合并单元格后内容自动填充?
    如何在excel中取消合并单元格后内容自动填充?
    如何让自己像打王者荣耀一样发了疯、拼了命的学习?
  • 原文地址:https://www.cnblogs.com/yuanliy/p/14612266.html
Copyright © 2011-2022 走看看