css - CSS 翻译后是否有可能为 "snap to pixel"？

Question

我创建了一个模态框并使用 technique Chris Coyer mentioned 将其垂直居中.到目前为止我发现的唯一问题是有时盒子会偏移半个像素，这会让一些 child 看起来有点不稳定。我的问题是:是否可以将结果捕捉到最近的整个像素？

更新

这里有几张图片可以更好地说明问题。在第一张图片中，您可以看到文本输入和链接下划线已正确呈现:

第二张图片显示了使用 CSS 转换后的效果。请注意模糊的链接下划线和错误呈现的文本输入。

虽然第二张图片没有显示出来，但偶尔我会注意到顶部和底部的白线具有相同的模糊效果。

郑重声明，文本输入的样式使用简单的边框和背景色。我在此处包含了这些输入的 CSS，因此您可以看到没有发生任何特殊情况:

input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    box-shadow: 0 1px 3px -1px #D5D5D5 inset;
    color: #4C4C4C;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    max-width: 100%;
    padding: 5px;
    transition: border-color 0.1s ease 0s;
}

Answer 1

唯一可靠的解决方案是确保您的元素占据偶数 像素。如果高度(或宽度)不能被 2 整除，那么它将尝试在半像素上渲染您的元素，从而导致模糊。

Firefox 没有这个问题，因为它支持真正的子像素渲染。因此，即使您的元素位于半像素上，Firefox 也能优雅地处理它。

根据我的经验，Webkit 通常会将元素对齐到最近的像素——(例如，当使用 letter-spacing 属性时)——所以它的行为不一样有点奇怪翻译的方式。