我有这个非常简单的表格：http://jsfiddle.net/TKb6M/91/。有时，当我使用 Chrome 放大或缩小时，输入边框会消失。例如，当我放大到 90% 时，我得到：
当然，您的里程可能会有所不同。
如果您想知道那些 <span> 标签，我会按照 How do I make an input element occupy all remaining horizontal space? 的建议添加它们。
我的 CSS 有问题还是 Chrome 错误？它似乎在 Firefox 上运行良好。我可以做些什么来避免这种行为？
谢谢。
【问题讨论】：
<table> 元素上的填充规则。
我在有边框的 div 包装无边框 input 时遇到了同样的问题，这里所有的好答案都没有帮助我。
最后，添加：
overflow: auto;
div 元素（带有问题边框的元素）成功了。
【讨论】：
我很确定 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
希望对你有帮助
【讨论】：
我知道我在游戏中迟到了，但稍微捏造一下并将边框宽度设置为 1.5 像素似乎每次都能奏效。
【讨论】：
我在 2018 年遇到了类似的 chrome 问题 - 输入和文本区域缺少顶部边框。解决方法是将css中的顶部边框简单地指定为
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
我无法解释为什么需要这样做，而且它只是在某些地方失去了边界，但至少这是一个快速的解决方法。
【讨论】：
您正在强制 Chrome 进行亚像素计算，这通常会产生奇怪的行为。
如果您将输入的高度更改为 30 像素，则 90% 的缩放可以正常工作（因为这是 27 像素），但 75% 的缩放则不行（因为这是 22.50 像素）。
您也可以通过将边框设置为 3px 的宽度来避免这种情况。在这种情况下，您会看到不同地方的边框宽度不同。
无论如何，最好的解决方案是在输入周围留出更多空间，以便可以清晰地绘制边框，即使它位于亚像素位置。
【讨论】：
如果需要 overflow: hidden ，请提及 overflow: hidden 仅适用于您面临宽度问题的浏览器。在其他浏览器中，metion display: flex 使宽度自动正确，并且在放大/缩小时边框不会消失。
例如： 在我的情况下，宽度仅适用于 IE，因此我提到：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
并且在Firefox和Chrome中出现了放大/缩小问题，所以我提到了
.spanStyles {
display : flex;
}
这解决了我在所有浏览器中的问题。
【讨论】：
这是因为您设置了固定高度，并且在缩放时输入变得大于该高度，使边框消失。使用 line-height 和 padding 来获得所需的高度 - 请参阅 updated Fiddle
更新：忽略我所说的，这是因为您在跨度上设置了overflow:hidden，删除它应该可以解决问题。可能会导致需要更改输入的宽度。
附带说明；你正在让你的 span 成为一个块元素，它很好并且可以工作，但它看起来有点糟糕。如果可能，请尝试使用块元素，例如 a 而不是将内联元素更改为块。
【讨论】：
overflow:hidden 位是允许输入宽度上升到 100% 所必需的，这是我想保留的。
height: 32px 的设置让边框消失了。我得到了所需的<select> 元素集padding: 0.2rem 的高度。