八个 CSS Reset 技巧,兼容性问题减少 85%

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%; }1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.
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; }1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.
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) ")"; } }1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.

THE END
本站服务器由亿华云赞助提供-企业级高防云服务器