Chrome中奇怪的边框宽度行为？答案

【问题标题】：Weird border-width behaviour in Chrome?Chrome中奇怪的边框宽度行为？
【发布时间】：2014-04-28 23:32:21
【问题描述】：

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

这是一个演示它的 Codepen：http://codepen.io/anon/pen/Dkadl。

我添加了Increase margin.. 和Decrease margin.. 按钮以使其更易于查看（单击它们以相应地更改margin-bottom 属性）。

.user-inputs 的 margin-bottom 属性似乎影响了我输入的 border-width 以及模糊其他元素。我只能在 Chrome 中看到这个错误。

怎么了？

编辑：这对我来说是这样的：
如您所见，元素变得非常模糊，并且某些元素的边框宽度增加了..

【问题讨论】：

在 windows 和最新的 chrome 上，除了边距本身没有区别，Border-width 对我来说根本没有改变，你在使用 mac
现在我看到了问题，这里也一样，
你可以删除border:0而不是为除底部以外的每一侧应用border-top border-left和border right，我改变了它，现在不是那样了
仍然出现错误，问题可能是由于 chrome 但必须有办法解决它
我认为你需要重置这个[我试过了，但无法解决我稍后会检查它]input, input[type="password"], input[type="search"] , 是索引

【解决方案1】：

这是由 Translate 50% 引起的，在它不是整数（部分像素）的边距上，它会使内容变得模糊。

正如this similar question 上的回答，将这些添加到您的#login-section 块中：

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

查看更新的Codepen

【讨论】：