Chrome（谷歌浏览器）图片缩小状态下模糊的解决办法

发布时间：2021-2-01 11:10

本人很少用Chrome（谷歌浏览器），绝大部分情况下火狐是主力浏览器。但随着新Microsoft Edge推出，两款浏览器也交替使用起来，感觉新Microsoft Edge确实比火狐能快些，不过发现在Microsoft Edge中缩小后的缩略图明显比火狐模糊。

解决办法，在样式文件中添加：

    img {
    	backface-visibility: hidden;
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-ms-backface-visibility: hidden;
    }

如果是背景图片，给背景图片的Div加上：

    .xxx {
    	image-rendering: -moz-crisp-edges; /* Firefox */
    	image-rendering: -o-crisp-edges; /* Opera */
    	image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    	image-rendering: crisp-edges;
    	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
    }

虽然处理后有所改善，不过还是与火狐有差距，而且Chrome（谷歌浏览器）看网页文字也明显不如火狐清晰，但显然比之前好一些。

Chrome