本文介绍了放大时,边框在Chrome中消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

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



我的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中消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-07 02:54