八个 CSS Reset 技巧,兼容性问题减少 85%
CSS Reset 是构建稳定跨浏览器样式的基础,可以消除 HTML 元素在不同的浏览器中默认样式的差异。分享一些现代化的 CSS Reset 技巧,帮助你解决大部分浏览器兼容性问题,提高开发效率。
使用更智能的盒模型重置,确保元素尺寸计算的一致性。
复制
*, *::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.
统一各浏览器的文本渲染表现。
复制
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.
消除表单元素的浏览器默认样式差异。
统一列表显示效果。
确保媒体元素在各浏览器中的一致表现。
统一各浏览器的滚动条行为。
优化移动设备的触摸体验。
确保网页在打印时的正确显示。
复制
@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