我创建了一个模态框并使用克里斯·科耶提到的技术 http://css-tricks.com/centering-percentage-widthheight-elements/。到目前为止,我发现的唯一问题是,有时盒子会偏移半个像素,这会让一些孩子看起来有点奇怪。我的问题是:是否可以将结果捕捉到最近的整个像素?
Update
这里有几张图片可以更好地说明这个问题。在第一张图片中,您可以看到文本输入和链接下划线已正确呈现:
第二张图显示了使用 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;
}
唯一的防弹解决方案是确保您的元素占据even像素数。如果高度(或宽度)不能被 2 整除,那么它将尝试在半像素上渲染元素,从而导致模糊。
Firefox 不存在这个问题,因为它支持真正的子像素渲染。因此,即使您的元素位于半像素上,Firefox 也会优雅地处理它。
根据我的经验,Webkit 通常会将元素捕捉到最近的像素 –(例如,当使用letter-spacing
属性)——所以有点奇怪,它的行为方式与translate
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)