css、javascript遇到的兼容性问题汇总和处理

css、javascript遇到的兼容性问题汇总和处理
 最后更新于 2024年10月02日 22:59:52

1、问题： iOS中 CSS 伪类 :active 无效果

解决：

在按钮元素或 body/html 上绑定一个 touchstart事件 激活 :active状态。

<body ontouchstart="" onmouseover=""></body>

// or

var _body = document.querySelector('body');
_body.addEventListener('touchstart', function () {});
_body.addEventListener('mouseover', function () {});

// Vue 中使用
<a href="" v-on:touchstart="">链接</a>

2、问题： IE9 及以下版本的浏览器中 DOM 元素 不支持 classList 属性

解决：

// classList 兼容性处理
if (!("classList" in document.documentElement)) {
  Object.defineProperty(HTMLElement.prototype, 'classList', {
    get: function() {
      var self = this;

      function update(fn) {
        return function(value) {
          var classes = self.className.split(/\s+/g);
          var index = classes.indexOf(value);

          fn(classes, index, value);
          self.className = classes.join(" ");
        }
      }

      return {
        add: update(function (classes, index, value) {
          if (!~index) classes.push(value);
        }),

        remove: update(function (classes, index) {
          if (~index) classes.splice(index, 1);
        }),

        toggle: update(function (classes, index, value) {
          if (~index) {
            classes.splice(index, 1);
          } else {
            classes.push(value);
          }
        }),

        contains: function (value) {
          return !!~self.className.split(/\s+/g).indexOf(value);
        },

        item: function (i) {
          return self.className.split(/\s+/g)[i] || null;
        }
      };
    }
  });
}

3、问题： Android 设备中 CSS 设置为垂直居中后，实际偏上的问题

原因 ：

作者：周祺，来源链接：https://www.zhihu.com/question/39516424/answer/274374076

导致这个问题的本质原因可能是 Android 在排版计算的时候参考了 primyfont 字体的相关属性（即 HHead Ascent 、HHead Descent 等），而 primyfont 的查找是看 font-family 里哪个字体在 fonts.xml 里第一个匹配上，而原生 Android 下中文字体是没有 family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在 font-family 里显式申明中文，或者通过什么方法保证所有字符都fallback到 中文字体。

解决：

  1. 针对Android 7.0+设备：<html>上设置 lang 属性：<html lang="zh-cmn-Hans"> ，同时 font-family 不指定英文，如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+ 才能ok，早期的内核下会导致英文fallback到 Noto Sans Myanmar，这个字体非常丑。
  2. 针对MIUI 8.0+设备：设置 font-family: miui 。这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了 family name：miui，所以我们可以直接设置。
  3. 字体大小不要使用奇数字号
  4. 使用 display: table-cell 布局 
    .label {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
  5. 使用 transform

4、问题： CSS的居中方案

  • width + margin 方案

指定父元素的宽度，再通过 margin-left: auto;margin-right: auto 实现水平居中。

缺陷：父元素 width 不能指定的情况下不适用。

  • text-align + inline-block 方案

父元素设置 text-align: center，规定子元素水平居中。 子元素设置 display: inline-block; *display: inline

缺陷： 子元素需要强制为 inline 行元素。

  • float 方案

父元素 margin-left: 50% 或 position: relative;left: 50% 子元素 position: relative;right: 50%

非浮动的 div元素是一个块元素，width 默认是 100%。而浮动后的 div元素，width 是内部元素的实际宽度

  1. 左浮动 div元素 父级 div元素左浮动后，影响到内部的子元素。
    Loading...
  2. ul 元素右移 50%，即 position: relative; left: 50%;
    Loading...
  3. li 元素左移 50%, 即 position: relative; right: 50%
    Loading...

参考： Horizontally Centered Menus with no CSS hacks

  • absolute 方案

父元素通过 absolute 绝对定位实现

div {
  position: absolute;
  left: 50%;
  margin-left: - (width / 2) px; // 或者使用 css中的 calc函数
  // left: calc(50% - (width / 2) px)
}
  • flex 方案

使用 CSS3 中新增 flex 弹性盒子的属性 box-orient: horizontal

div {
  /* Firefox */
  display: -moz-box;
  -moz-box-orient: horizontal;

  /* Safari、Opera 以及 Chrome */
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  /* W3C */
  display: box;
  box-orient: horizontal;
}
  • fit-content 方案

使用 CSS3 针对 width 新增的属性值

div {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

兼容性：

Loading...