八个 CSS Reset 技巧，兼容性问题减少 85%-51CTO.COM

CSS Reset 是构建稳定跨浏览器样式的基础，可以消除 HTML 元素在不同的浏览器中默认样式的差异。分享一些现代化的 CSS Reset 技巧，帮助你解决大部分浏览器兼容性问题，提高开发效率。

1. 现代化盒模型重置

使用更智能的盒模型重置，确保元素尺寸计算的一致性。

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* 防止边距塌陷 */
  min-height: 0;
  min-width: 0;
}

html {
  /* 修复iOS点击高亮问题 */
  -webkit-tap-highlight-color: transparent;
  /* 平滑滚动 */
  scroll-behavior: smooth;
}

/* 防止超长内容破坏布局 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

2. 排版基础重置

统一各浏览器的文本渲染表现。

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 改善CJK文本的显示 */
  -webkit-text-size-adjust: 100%;
}

/* 统一标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 重置链接样式 */
a {
  color: inherit;
  text-decoration: none;
}

3. 表单元素标准化

消除表单元素的浏览器默认样式差异。

4. 列表样式重置

统一列表显示效果。

5. 媒体元素优化

确保媒体元素在各浏览器中的一致表现。

6. 滚动条行为统一

统一各浏览器的滚动条行为。

7. 触摸操作优化

优化移动设备的触摸体验。

8. 打印样式优化

确保网页在打印时的正确显示。

@media print {
  /* 打印时的颜色和背景处理 */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  
  /* 避免打印时断页问题 */
  a {
    page-break-inside: avoid;
  }
  
  /* 确保打印时显示完整的URL */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}