8个CSS Reset技巧，兼容性问题减少85%

JavaScript , , , ,

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) ")";  
  }  
}

欢迎补充。