放大时,Chrome中的边框会消失

Question

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

当然,您的里程可能会有所不同.

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

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

谢谢.

Answer 1

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

如果您有像这样的表格边框:

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

把它改成这个:

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

我在此链接中找到了此解决方案:https://productforums.google.com/forum/#!topic /rome/r1neUxqo5Gc

我希望它有所帮助

Answer 2

您正在强制Chrome进行子像素计算,这通常会产生奇怪的行为.

如果您将输入的高度更改为30px,则90%缩放可以正常工作(因为这是27px),但缩放率不是75%(因为这是22.50像素).

你也可以通过给边框宽度为3px来避免这种情况.在这种情况下,您将看到不同位置的边框宽度不同.

无论如何,最好的解决方案是在输入周围留出更多空间,以便即使在子像素位置也可以干净地绘制边框.

Answer 3

我知道我在游戏中迟到了，但是稍微捏造一下并将边框宽度设置为 1.5px 似乎每次都可以解决问题。

Answer 4

我在带边框的div无边框包装上遇到了同样的问题，input这里所有的好答案都没有帮助我。

最后，补充：

overflow: auto; 

到div元素（边框有问题的那个）做到了。