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) ")";
}
}
欢迎补充。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
