八個 CSS Reset 技巧，兼容性問題減少 85%
作者：story
本文分享一些現(xiàn)代化的 CSS Reset 技巧，幫助你解決大部分瀏覽器兼容性問題，提高開發(fā)效率。
CSS Reset 是構(gòu)建穩(wěn)定跨瀏覽器樣式的基礎(chǔ)，可以消除 HTML 元素在不同的瀏覽器中默認樣式的差異。分享一些現(xiàn)代化的 CSS Reset 技巧，幫助你解決大部分瀏覽器兼容性問題，提高開發(fā)效率。
1. 現(xiàn)代化盒模型重置
使用更智能的盒模型重置，確保元素尺寸計算的一致性。
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
/* 防止邊距塌陷 */
min-height: 0;
min-width: 0;
}
html {
/* 修復(fù)iOS點擊高亮問題 */
-webkit-tap-highlight-color: transparent;
/* 平滑滾動 */
scroll-behavior: smooth;
}
/* 防止超長內(nèi)容破壞布局 */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}2. 排版基礎(chǔ)重置
統(tǒng)一各瀏覽器的文本渲染表現(xiàn)。
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* 改善CJK文本的顯示 */
-webkit-text-size-adjust: 100%;
}
/* 統(tǒng)一標題樣式 */
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
/* 重置鏈接樣式 */
a {
color: inherit;
text-decoration: none;
}3. 表單元素標準化
消除表單元素的瀏覽器默認樣式差異。
4. 列表樣式重置
統(tǒng)一列表顯示效果。
5. 媒體元素優(yōu)化
確保媒體元素在各瀏覽器中的一致表現(xiàn)。
6. 滾動條行為統(tǒng)一
統(tǒng)一各瀏覽器的滾動條行為。
7. 觸摸操作優(yōu)化
優(yōu)化移動設(shè)備的觸摸體驗。
8. 打印樣式優(yōu)化
確保網(wǎng)頁在打印時的正確顯示。
@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) ")";
}
}責(zé)任編輯：趙寧寧
來源：
JavaScript
