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

Question

假设我们有一个名为 pic.png 的 72x100px 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;