放大时，边框在Chrome中消失 [英] Borders disappear in Chrome when I zoom in

问题描述

我有这个非常简单的形式：。

我的CSS有问题，还是这个Chrome错误？它似乎工作正常在Firefox。我可以如何避免这种行为？

谢谢。

解决方案

如果你将输入的高度改为30px，那么90％的缩放工作就OK了（因为这是27px），但缩放75％不是（因为这是22.50像素）。

你也可以通过给边框宽度为3px 。在这种情况下，你会看到边框宽度在不同的地方是不同的。

无论如何，最好的解决方案是给输入更多的空间，即使它处于子像素位置也可以清晰地绘制。

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:

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?.

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?

Thanks.

解决方案

You are forcing Chrome to do subpixel calculus, and this usually has strange behaviours.

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).

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 .

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.

这篇关于放大时，边框在Chrome中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！