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

Question

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

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

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

我的CSS有没有问题，或者这是一个Chrome的错误？它似乎在Firefox上正常工作。我能做些什么来避免这种行为？

谢谢。

Answer 1

您正在强制Chrome进行子像素计算，并且这通常具有奇怪的行为。

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

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

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

Answer 2

这是因为你设置了一个固定的高度，并且当缩放输入的长度大于该高度时，使边框消失。使用线高度和填充以获得所需的高度，而不是 - 见updated Fiddle

更新：忽略什么，我说，那是因为你对你的跨度设定overflow:hidden，除去应该做的伎俩。可能会导致需要改变输入宽度。

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

Answer 3

如果溢出：隐藏是必需的，请提及overflow：隐藏仅适用于您面对宽度问题的浏览器。在其他浏览器中，metion显示：flex，以便自动采用宽度正确的方式，以便放大/缩小边框不会消失。

例如： 宽度是不是在我的情况下，只有IE浏览器是正确的，所以我提到：

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

和输入/输出问题变焦在Firefox和Chrome是存在的，所以我提到

.spanStyles { 
display : flex; 
} 

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