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

Question

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

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

如果您想知道这些

<span>

标签，我按照如何使输入元素占据所有剩余水平空间？.

中的建议添加了它们。

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

谢谢。

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

希望对你有帮助

Answer 2

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

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

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

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

Answer 3

我知道我在游戏中迟到了，但稍微捏造一下并将边框宽度设置为 1.5px 似乎每次都能达到目的。

Answer 4

我也遇到了同样的问题，有边框的

div

包裹无边框

input

，这里所有很棒的答案都没有帮助我。

最后补充：

overflow: auto; 

到

div

元素（边框有问题的元素）就成功了。

Answer 5

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

更新：忽略我说的，这是因为你在你的跨度上设置了

overflow:hidden

，删除它应该可以解决问题。但可能会导致需要更改输入的宽度。

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

Answer 6

我在 2018 年使用 chrome 时遇到了类似的问题 - 输入和文本区域的顶部边框丢失。解决方法是将 css 中的顶部边框简单地指定为

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

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

Answer 7

如果溢出：隐藏是必要的，请仅针对您面临宽度问题的浏览器提及溢出：隐藏。在其他浏览器中，提及 display: flex 以便自动正确获取宽度，并且在放大/缩小时边框不会消失。

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

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

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

.spanStyles {
 display : flex;
}

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

Answer 8

感谢您上面的所有回答，我遇到了这样的边框问题，缩小时边框显示很乱。终于发现

overflow: hidden

对我有用。

export const InputWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid #707070;
  padding: 16px 0 16px 16px;
  overflow: hidden;

Answer 9

我面临着同样的问题，并向 textArea 添加以下样式行对我有用。

border: "1px solid #ccc"