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) ")";
}
}
欢迎补充。
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應服務商
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質服務" 的經(jīng)營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應用服務。
公安局備案號：
專屬顧問
