為什麼 Chrome 模態中的字體模糊，如何修復？

Chrome 中的字體模糊

儘管它很有吸引力，但Chrome 用戶可能會遇到字體顯示模糊的問題，特別是在模式框中。雖然這種異常現像在 IE 或 Firefox 等其他瀏覽器中並不明顯，但 Chrome 卻表現出了這種令人不安的行為。

為了更深入地研究，使用者檢查了與名為「Start」的標籤關聯的 CSS。他們注意到導致外觀模糊的 CSS 規則：

.md-modal {
    transform: translateX(-50%) translateY(-50%);
}

此規則將模態元素定位在螢幕的中心。但是，刪除它會導致模態失去中心對齊。

解決方案

幸運的是，透過稍微調整 Y 軸值找到了解決方案在變換屬性中。使用者沒有使用translateY(-50%)，而是減去了0.5px，結果是：

transform: translateX(-50%) translateY(calc(-50% - .5px));

這種微妙的修改解決了字體模糊問題，同時保持了模態元素所需的居中。與改變百分比或採用 JavaScript 解決方法相比，這種方法提供了更乾淨、更直接的解決方案。

以上是為什麼 Chrome 模態中的字體模糊，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！