為什麼模態框中的 Chrome 字體模糊？

模態框中的Chrome 字體模糊

當Chrome 在模態框中顯示模糊字體時，就會出現此問題，儘管字體在其他模態框中顯示清晰IE 和Firefox 等瀏覽器。調查顯示，問題出在模態容器 CSS 中的轉換屬性。

有問題的 CSS 規則是：

transform: translateX(-50%) translateY(-50%);

該規則負責使模態框水平居中，並且垂直方向將其在兩個方向上平移 50%。但是，在 Chrome 中，這種翻譯會導致字體模糊。

解是修改translateX() 和translateY() 值。透過從translateY()值中減去0.5px，可以解決渲染問題。這是修正後的程式碼片段：

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

此變更將確保模式仍然準確居中，同時消除模糊的字體渲染。與調整百分比或使用 JavaScript 修復相比，它提供了更清晰的解決方案。

請記住，上面顯示的 CSS 適用於“.md-modal”類，並且在其他上下文中可能會出現模糊字體問題使用模態框。在這種情況下，可以透過編輯負責使模態居中的相關 CSS 規則來應用相同的解決方案。

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