当我放大时，边框在 Chrome 中消失

Question

我有这个非常简单的表格：http: //jsfiddle.net/TKb6M/91/ 。有时，当我使用 Chrome 放大或缩小时，输入边框会消失。例如，当我缩放到 90% 时，我得到：

当然，您的里程可能会有所不同。

如果您想知道这些 <span> 标签，我按照 如何使输入元素占据所有剩余水平空间中的建议添加了它们？ .

我的 CSS 有问题还是 Chrome 错误？它似乎在 Firefox 上运行良好。我该怎么做才能避免这种行为？

谢谢。

原文由 Luís Pureza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我很确定 Luís Pureza 已经解决了他的问题，但我找到了一个非常简单的方法来解决它，只改变这个：

如果您有这样的表格边框：

 INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

把它改成这个：

 INPUT,TEXTAREA {
border-top: thin solid #aaa
}

我通过此链接找到了此解决方案： https ://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

我希望它有帮助

原文由 Víctor Campoy Marco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你强迫 Chrome 进行子像素计算，这通常会有奇怪的行为。

如果您将输入的高度更改为 30 像素，那么 90% 的缩放可以正常工作（因为这是 27 像素），但 75% 的缩放则不行（因为这是 22.50 像素）。

您也可以通过将边框宽度设置为 3px 来避免这种情况。在这种情况下，你会看到不同地方的边框宽度是不同的。

无论如何，最好的解决方案是在输入周围留出更多空间，以便即使在亚像素位置也可以清晰地绘制边框。

原文由 vals 发布，翻译遵循 CC BY-SA 3.0 许可协议