css – Chrome字体显示模糊

它在做我的眼睛！

在IE和Firefox看起来不错

Chrome(上图)

运行版本39的chrome，
只在模态框中显示模糊，如果我更改字体系列没有什么不同。

这是CSS(对于标签“开始”)，浏览器呈现以下内容

Box-sizing: border-Box;
color: rgb(85,85,85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;

是浏览器还是CSS？

–UPDATE —

好像看起来像这个CSS

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <--- This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

然而，如果我把它从我的模态不再中心？

解决方法

在对我的一个元素应用了translate transform之后，我在Chrome上遇到了同样的问题。它似乎是一个错误铬。唯一对我有用的是：

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

另一个解决方案可以是平滑字体渲染：

#the_element_that_you_applied_translate_to {
  -webkit-font-smoothing: antialiased;
}

原文地址：https://www.jb51.cc/css/220080.html