33

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

更新

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

线条清晰的模态框

第二张图片显示了使用 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;
}
4

4 回答 4

7

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

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

根据我的经验，Webkit 通常会将元素捕捉到最近的像素——（例如，在使用letter-spacing属性时）——所以它的行为方式与translate.

于 2014-05-07T21:09:52.893 回答
3

在某些浏览器中，您可以避免 3d 变换而使用 2d 变换，默认情况下，平移将对齐像素：

transform: translate(-50%, -50%);

渲染被捕捉到像素

transform: translate3d(-50%, -50%, 0);

渲染是抗锯齿的

JSBin：http: //jsbin.com/epijal/3/edit

于 2013-08-15T18:23:02.893 回答
1

由于我在 Chrome 中遇到了与亚像素相同的问题，并且在 64 版中它仍然无法处理亚像素变换值，我决定编写一个小的 js 脚本来修复亚像素问题。你可以在github上找到它。它只是将变换值四舍五入为全像素。

亚像素如何工作

希望有人会发现它有帮助！

于 2018-02-26T16:20:00.460 回答
1

我总是使用perspective: 1px;，例如：

{
  margin: 50% 0 0 50%;
  perspective: 1px;
 transform: translate(-50%, -50%);
}
于 2019-05-17T15:05:33.140 回答