html - 填充在 iOS 上似乎无法正确显示

Question

我正在使用 3 个背景图像显示为移动网站的图标，这些图像在我的计算机上看起来非常好(使用窗口大小和用户代理)，但是，在我的 iPhone 上，图标被切断了，就好像填充是'足够高了。

这是它在桌面上的显示方式^

然而，在手机上它有这个效果 v

知道是什么原因造成的吗？当设置为 20% 时，填充足以在所有屏幕尺寸中显示带有几个像素的图标，但即使设置为 22%，它也无法正确显示，所以我假设这是一个 iOS 错误。

如果有帮助，我正在使用 ios7 和 safari!

.icon-ticket
{
    background: url("@{path-img}icons/icon-ticket-2x.png") no-repeat;
}

.icon-players,
.icon-prize,
.icon-ticket
{
    background-size: 40%;
    padding: 22% 0;
}

Answer 1

我认为这与 issue I'm seeing 有关:

据我所知，iOS Safari 正在使用填充遮盖盒模型的背景。同样的事情发生在 background-color 属性上(见我上面链接的帖子)。

似乎是一个错误。此时唯一的解决方法是删除具有背景的元素的填充。