为什么模态框中的 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中文网其他相关文章！