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

Question

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

在此处输入图像描述

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

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

谢谢。

score 62 · Accepted Answer

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

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

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

把它改成这个：

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

我希望它有帮助

score 32 · Accepted Answer

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

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

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

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

score 8 · Accepted Answer

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

score 7 · Accepted Answer

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

最后，添加：

overflow: auto;

对div元素（有问题的边框）起到了作用。

score 3 · Accepted Answer

这是因为您设置了固定高度，并且在缩放输入时变得大于该高度，使边框消失。使用 line-height 和 padding 来获得所需的高度 - 请参阅更新的 Fiddle

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

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

score 1 · Accepted Answer

我在 2018 年遇到了类似的 chrome 问题——输入和文本区域缺少顶部边框。解决方法是在 css 中简单地指定顶部边框

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

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

score 0 · Accepted Answer

如果溢出：隐藏是必要的，请提及溢出：隐藏仅适用于您面临宽度问题的浏览器。在其他浏览器中，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;
}

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

7 回答 7