Chrome中奇怪的边框宽度行为?

时间:2014-03-21 14:24:35

标签: html css google-chrome behavior

我的Chrome(第33.0.1750.152页)在某些输入的边框宽度上表现得非常奇怪。

以下是Codepen演示它:http://codepen.io/anon/pen/Dkadl

我添加了Increase margin..Decrease margin..按钮,以便更容易查看(点击它们以相应地更改margin-bottom属性。)

margin-bottom的{​​{1}}属性似乎影响了我输入的.user-inputs以及模糊其他元素。我只能在Chrome中看到此错误。

出了什么问题?

编辑:这就是我的样子: Default view Added 2px to margin-bottom
如您所见,元素变得非常模糊,某些元素的边框宽度也增加了。

1 个答案:

答案 0 :(得分:0)

这是由翻译50%引起的,在不是整数(部分像素)的边距上,它会使内容模糊。

根据this similar question的回答,将这些添加到您的#login-section块:

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

查看更新的Codepen