常见浏览器兼容性问题

问题

前端开发中有哪些常见的浏览器兼容性问题？如何解决？

解答

1. CSS 默认样式差异

不同浏览器对元素有不同的默认样式。

/* 方案一：CSS Reset - 清除所有默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 方案二：使用 Normalize.css - 统一默认样式 */
/* npm install normalize.css */

2. CSS 属性前缀

部分 CSS 属性需要浏览器前缀。

/* 手动添加前缀 */
.box {
  -webkit-transform: rotate(45deg); /* Chrome, Safari */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE */
  transform: rotate(45deg);
}

/* 推荐：使用 Autoprefixer 自动添加 */
/* postcss.config.js */
module.exports = {
  plugins: [require('autoprefixer')]
}

3. Flexbox 兼容性

.container {
  display: -webkit-box;      /* 旧版 iOS Safari */
  display: -webkit-flex;     /* Safari 6.1+ */
  display: flex;
  
  -webkit-box-pack: center;  /* 旧版语法 */
  -webkit-justify-content: center;
  justify-content: center;
}

4. JavaScript API 兼容

// 事件监听兼容
function addEvent(element, type, handler) {
  if (element.addEventListener) {
    // 标准方式
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    // IE8 及以下
    element.attachEvent('on' + type, handler);
  } else {
    element['on' + type] = handler;
  }
}

// 获取事件对象
function getEvent(event) {
  return event || window.event;
}

// 阻止默认行为
function preventDefault(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false; // IE
  }
}

// 阻止冒泡
function stopPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true; // IE
  }
}

5. ES6+ 语法兼容

使用 Babel 转译：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not dead']
      },
      useBuiltIns: 'usage', // 按需引入 polyfill
      corejs: 3
    }]
  ]
}

6. 特性检测

// 检测是否支持某个特性
if ('fetch' in window) {
  fetch('/api/data');
} else {
  // 使用 XMLHttpRequest 或引入 polyfill
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data');
  xhr.send();
}

// 使用 Modernizr 进行特性检测
if (Modernizr.flexbox) {
  // 支持 flexbox
} else {
  // 降级方案
}

7. HTML5 新标签兼容

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<![endif]-->

// 或手动创建元素
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('footer');

8. 图片格式兼容

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="fallback">
</picture>

关键点

• CSS Reset/Normalize：统一浏览器默认样式
• Autoprefixer：自动添加 CSS 前缀，无需手写
• Babel + Polyfill：转译 ES6+ 语法，补充缺失 API
• 特性检测：优于浏览器嗅探，按能力提供功能
• 渐进增强：先保证基础功能，再为现代浏览器增强体验