Chrome 字体显得模糊 [英] Chrome Font appears Blurry
问题描述
让我眼前一亮!
在 IE 和 Firefox 中看起来不错
looks fine in IE and Firefox
铬(上)
运行 39 版的 chrome,仅在模式框中显得模糊,如果我更改字体系列,则没有任何区别.
Running version 39 of chrome, only appears blurry in a modal box, does not make any difference if I change the font family.
这是浏览器呈现的 CSS(用于标签开始")
This is the CSS (for label "Start") the browser renders the following
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?
Is it the browser or CSS?
--更新---
好的看起来像这个 CSS
Ok looks like its this 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%);
}
但是,如果我将其取出,我的模态不再居中?
However if I take it out my modal no longer centres?
推荐答案
我通过从 Y 轴的值中减去 0.5px 解决了这个问题.所以而不是做:
I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:
transform: translateX(-50%) translateY(-50%);
我是这样做的:
transform: translateX(-50%) translateY(calc(-50% - .5px));
这为我解决了这个问题,我发现这是一个更简洁的解决方案,然后摆弄百分比或使用 Javascript.
This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.
这篇关于Chrome 字体显得模糊的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!