最近遇到的兼容性问题和适配问题

JS:

IE:

1、不能添加监听标准事件,添加polyfill

    initEvent: function initEvent(dom, eventName, callback) {
      if (!dom || !eventName || !callback) return;
      if (document.addEventListener) { // 一般浏览器
        dom.addEventListener(eventName, callback, false);
      } else if (document.attachEvent) { // IE
        dom.attachEvent('on' + eventName, callback);
      } else {
        dom['on' + eventName] = callback;
      }
    },

2、不支持classlist,添加polyfill模拟jquery

    addClass: function addClass(dom, className) {
      if (!dom) return;
      if (this.hasClass(dom, className)) return;
      dom.className = dom.className + ' ' + className;
    },

    removeClass: function removeClass(dom, className) {
      if (!dom) return;
      dom.className = dom.className.replace(' ' + className, '');
      dom.className = dom.className.replace(className, '');
    },

    hasClass: function hasClass(dom, className) {
      return dom.className.match(' ' + className) || dom.className.match(className);
    },

    toggleClass: function toggleClass(dom, className) {
      if (this.hasClass(dom, className)) {
        this.removeClass(dom, className);
      } else {
        this.addClass(dom, className);
      }
    },

3、不支持HTML5新标签,引入HTML5SHIV

<script src="./static/html5shiv.min.js"></script>

CSS:

IE:

1、IE7及以下display: inline-block表现异常,div设置为inline-block显示为block:

  解决方法:

    display: inline-block;
  
  /* IE7及以下的Polyfill */

    display: inline-block;
    *zoom: 1;
    *display: inline;

  原理:IE7及以下识能别到  *[属性key],利用IE7中inline-block表现为block可以设置宽高,然后利用*zoom触发重排,利用*display覆盖block

2、IE8及以下不支持background-size:

  解决方法:

   padding-bottom: 36.7630492%;
   background: url('../../static/images/home_one@1x.png') no-repeat center;
   background-size: 100% 100%;

   /* IE8 background-size Hack */
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='../../static/images/home_one@1x.png',
      sizingMethod='scale');

  原理:利用IE中的过滤器对象处理,会有轻微闪烁问题。

3、IE10、IE11、IE edge中 flex + min-height 导致高度丢失

  解决方法: 参考 solved-by-flexbox :https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

.root {
 min-width: 960px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100%; /* 在min-height之外用100%高度, 利用content撑开*/
}

.header-back {
  flex: none; /* 固定 */
  display: block;
  width: 100%;
  height: 64px;
}

.content {
  flex: 1 0 auto; /* 弹性 */
  margin: 15px auto;
  width: 100%;
  max-width: 1266px;
}

.footer {
  flex: none; /* 固定 */
  display: block;
  width: 100%;
  height: 60px;
}

Safari:

1、Safari中min-width: unset无效:

  解决方法:

  min-width: 900px;
  ...
  @media screen and (max-width: $min-width) {
    min-width: unset;
    ...
  }

  /* 改为不会生效的值0px */
  min-width: 900px;
  ...
  @media screen and (max-width: $min-width) {
    min-width: 0px;
    ...
  }

  原理:IE7中和Android4.3版本也不支持unset,但是会当做无效值覆盖之前的min-width,而在Safari5中,会当做无效的代码,元素会保持原来的min-width。

2、IOS9中光标定位问题:

  在Vue2.4版本以下,nextTick实现是以MO和Promise为优先的策略,(MO和Promise都为MicroTask,优先执行)

  当一个input值改变事件如有有Watcher监听,并且在Watcher触发了另外的DOM元素重绘,多次重绘会导致input框的渲染不生效

  解决方法:

    1、把可能影响DOM的渲染domtask放入下一个MacroTask,这样就会等到input渲染完毕再执行domtask

    2、升级Vue至最新版本,最新版本中nextTick在WacherDOM的onXXX事件时,优先以MacroTask执行

     
watcher: {
  inputValue(){
    // ...
    setTimeout(() => {
          // 其他可能影响DOM渲染的task,比如
          //  this.showFlag = false;
        }, 0);
    // ...
  },
}

Android Browser:

1、Android4.3下不支持 vw宽度:

  解决方法:

  position: absolute;
  right: 0;
  top: 0;
  width: 100%;

  原理:将父元素100%宽度,子元素绝对定位,宽度100%

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序你好

CSharp代码示例每日一讲: 如何用GDI+技术在窗体上绘图?

872
来自专栏云瓣

从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/...)

1131
来自专栏技术墨客

React学习(3)——列表、键值与表单 原

    例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

1673
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

2264
来自专栏更流畅、简洁的软件开发方式

使用接口来统一控件的取值、赋值和初始化

      这里说的控件主要指的是文本框、下拉列表框这一类的控件,用户使用这些控件输入数据,然后我们需要提取这些数据进行处理。但是不同的控件有不同的取值方式,比...

2036
来自专栏逆向技术

Win32知识之窗口绘制.窗口第一讲

  在学习Win32的时候. 很多操作都是窗口进行操作的.那么今天就说一下窗口的本质是什么. 

1764
来自专栏C/C++基础

Linux命令(27)——echo命令

使用-e选项时,若字符串中出现以下字符,则特别加以处理,而不会将它当成一般文字输出:

1363
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

20610
来自专栏web前端教室

前端面试大坑实录

找工作嘛,要面试;公司招人嘛,也要面试。你面试是答题,公司招人是出题;双方都是陌生的,怎么凑成一对呢?就要靠面试题来牵线。在这个过程中呢,自然免不了要通过面试题...

972
来自专栏程序员互动联盟

【专业技术】还有人在用Qt开发app嘛?

编者按: 这个世界不缺工程师,但是缺大师。如果在Qt里写个app,传统做法,需要熟悉API,熟悉C++,熟悉Qt本身的实现,同时还要熟悉编程环境。 现在出现了一...

6327

扫码关注云+社区

领取腾讯云代金券