如何解决不同浏览器对 CSS 属性的支持差异？
问题背景
不同浏览器使用的渲染引擎（Blink、WebKit、Gecko）对 CSS 规范的实现程度不一，新属性在旧浏览器可能不被支持，需要采取兼容措施。
现有答案
1. CSS Reset / Normalize.css
- 作用：统一不同浏览器的默认样式，减少初始差异
- 区别：CSS Reset 移除所有默认样式；Normalize.css 保留有用默认值并统一
2. Autoprefixer（推荐）
- 作用：自动添加 CSS 属性前缀（-webkit-、-moz-、-ms-）
- 原理：根据 Can I Use 数据，在构建时自动添加需要的浏览器前缀
/* 输入 */
display: flex;
/* 输出 */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;3. Feature Detection
- 作用：检测浏览器是否支持某个 CSS 属性
- 实现：通过 JavaScript 检测
element.style是否包含某属性
if ('flexWrap' in document.documentElement.style) {
// 支持 flex
} else {
// 回退方案
}4. CSS Polyfill
- 作用：用 JavaScript 模拟浏览器不支持的 CSS 特性
- 示例：css-polyfill、object-fit-images
5. CSS Hack（避免过度使用）
- 类型：属性级 Hack、选择器级 Hack、IE 条件注释
- 风险：降低代码可读性和可维护性
总结
| 方法 | 适用场景 | 推荐程度 |
|---|---|---|
| Autoprefixer | 新属性前缀 | ⭐⭐⭐⭐⭐ |
| Normalize.css | 默认样式统一 | ⭐⭐⭐⭐⭐ |
| Feature Detection | 特性检测 | ⭐⭐⭐⭐ |
| CSS Polyfill | 旧浏览器支持 | ⭐⭐⭐ |
| CSS Hack | IE 特殊处理 | ⭐ |