如何修复浏览器缩放时不正确的元素大小？

Question

考虑我们有一个72x100px的PNG图像，称为pic.png。它的左半部分是黄色，右半部分是黑色。

然后我们有一个带有<i class="picture"></i>元素的网页，其中包含以下CSS：

.picture {
    background-image: url('pic.png');
    background-position: 0 36px;
    display: inline-block;
    height: 36px;
    width: 36px;
}

如果我在Chrome 50或Opera 37中打开此页面并将缩放比例设置为33％，67％或90％，我会在元素的右侧看到1px黑色条纹。屏幕分辨率为1920x1080。

我们如何解决此问题，以便在任何浏览器中该元素始终为黄色？

到目前为止，我知道如果我将宽度设置为35.5px，只有当比例为67％时才会看到黑色条纹。

Answer 1

尝试添加此功能，看看它是否解决了问题......

display: inline-table;