Question

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

enter image description here

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

如果您想知道这些<span>代码，我会按照How do I make an input element occupy all remaining horizontal space?的建议添加它们。

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

感谢。

Answer 1

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

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

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

将其更改为：

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

我希望它有所帮助

Answer 2

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

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

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

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

Answer 3

这是因为您设置了固定的高度，并且当缩放输入时，输入增长大于该高度，使边框消失。使用行高和填充来获得所需的高度 - 请参阅updated Fiddle

更新：忽略我说的话，这是因为你在你的跨度上设置overflow:hidden，删除它应该可以解决问题。可能导致需要改变输入的宽度。

旁注;你正在使你的跨度成为一个很好且有效的块元素，但它看起来有点糟糕。尝试使用块元素，如果可能的话，而不是将内联元素更改为块。

Answer 4

我知道我在游戏的后期，但稍微捏一下并将边框宽度设置为1.5px似乎每次都可以做到。

Answer 5

如果溢出：隐藏是必要的，请提及溢出：仅针对您遇到宽度问题的浏览器隐藏。在其他浏览器中，显示：flex以使宽度自动变为正确，因此在放大/缩小边框时不会消失。

例如：在我的情况下宽度不正确仅适用于IE，所以我提到：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}

在Firefox和Chrome中出现放大/缩小问题，所以我提到了

.spanStyles {
 display : flex;
}

这解决了我在所有浏览器中的问题。

Answer 6

我在2018年遇到类似的问题 - 输入和textareas上缺少顶部边框。解决方法是将css中的顶部边框指定为

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

我无法解释为什么需要它，而且它只是在某些地方失去了边界，但至少这是一个快速的解决方法。

Answer 7

我遇到了同样的问题，div带边框包装了input，无边界，这里所有的出色答案都没有帮助我最后，添加：

overflow: auto;

div元素（边界有问题的元素）成功了。