Html 当我放大时，Chrome 中的边框会消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12547580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Borders disappear in Chrome when I zoom in
提问by Luís Pureza
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
我有这个非常简单的形式：http: //jsfiddle.net/TKb6M/91/。有时，当我使用 Chrome 放大或缩小时，输入边框会消失。例如，当我放大到 90% 时，我得到：
Naturally, your mileage may vary.
当然，您的里程可能会有所不同。
In case you're wondering about those <span>tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
如果您想知道这些<span>标签，我按照如何使输入元素占据所有剩余水平空间的建议添加了它们。.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
我的 CSS 有问题还是 Chrome 的错误？它似乎在 Firefox 上运行良好。我该怎么做才能避免这种行为？
Thanks.
谢谢。
采纳答案by vals
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
您正在强制 Chrome 进行子像素计算，这通常会有奇怪的行为。
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
如果您将输入的高度更改为 30 像素，则 90% 的缩放可以正常工作（因为这是 27 像素），但不能使用 75% 的缩放（因为这是 22.50 像素）。
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
您也可以通过为边框设置 3px 的宽度来避免这种情况。在这种情况下，您会看到不同地方的边框宽度不同。
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
无论如何，最好的解决方案是在输入周围留出更多空间，这样即使边框位于亚像素位置，也可以清晰地绘制。
回答by Víctor Campoy Marco
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
我很确定 Luís Pureza 已经解决了他的问题，但我找到了一个非常简单的方法来解决它，只改变了这个：
If you have a table border like this one:
如果您有这样的表格边框：
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
改成这个：
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
我通过这个链接找到了这个解决方案：https: //productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
我希望它有帮助
回答by Elad
I had the same problem with a bordered divwrapping borderless input, and all the great answers here does not helped me
Finally, adding:
我在带边框的div包装无边框时遇到了同样的问题，input这里所有的好答案都没有帮助我最后，补充说：
overflow: auto;
to the divelement (the one with the problematic border) did the trick.
到div元素（边框有问题的那个）做到了。
回答by David Morton
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
我知道我在游戏中迟到了，但是稍微捏造一下并将边框宽度设置为 1.5px 似乎每次都可以解决问题。
回答by Henrik Janbell
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
这是因为您设置了一个固定的高度，并且在缩放输入时输入的高度大于该高度，从而使边框消失。使用 line-height 和 padding 来获得所需的高度 - 请参阅更新的 Fiddle
Update:Ignore what I said, it's because you're setting overflow:hiddenon your span, removing that should do the trick. Might result in a need to change width of input though.
更新：忽略我说的话，这是因为您正在设置overflow:hidden跨度，删除它应该可以解决问题。可能会导致需要更改输入的宽度。
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
附带说明；您正在使您的跨度成为一个很好且有效的块元素，但它看起来有点糟糕。如果可能，请尝试使用块元素，例如 a 而不是将内联元素更改为块。
回答by user2728841
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
我在 2018 年遇到了类似的 chrome 问题——输入和文本区域缺少顶部边框。修复方法是将 css 中的顶部边框指定为
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
我无法解释为什么需要这样做，它只是在某些地方丢失了边界，但至少这是一个快速的解决方法。
回答by Aarzoo Trehan
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
如果溢出：隐藏是必要的，请提及溢出：隐藏仅适用于您面临宽度问题的浏览器。在其他浏览器中，提到 display: flex 以便宽度自动正确，并且在放大/缩小时边框不会消失。
For example : Width was not correct in my case only for IE, so I mentioned :
例如：在我的情况下，宽度不正确，仅适用于 IE，所以我提到：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
放大/缩小问题发生在 Firefox 和 chrome 中，所以我提到
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
这解决了我在所有浏览器中的问题。
