填充似乎不能在iOS上正确显示

问题描述

我使用3个背景图像作为移动网站的图标显示，在我的计算机上显示得非常好（使用窗口大小和用户代理），但是，在我的iphone上，图标被切断，就好像填充不是' t足够高。

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

然而，在移动设备上它有这种效果v

任何想法是什么造成的这个？当设置为20％时，填充足以在所有屏幕尺寸中显示剩余几个像素的图标，但即使设置为22％，也不能正确显示，因此我假设它是iOS错误。 / p>

如果有帮助，我使用ios7和safari！

 。 icon-ticket 
 {
 background：url（@ {path-img} icons / icon-ticket-2x.png）no-repeat; 
} 
 
 .icon-players，
 .icon-prize，
 .icon-ticket 
 {
背景大小：40％ ; 
填充：22％0; 
} 
  

解决方案

我认为这与：

据我所知，发生的事情是iOS Safari使用填充模糊了盒子模型的背景。背景颜色属性也会发生同样的情况（请参阅上面链接的帖子）。

看起来像一个bug。只有解决此问题的方法是为具有背景的元素移除填充。

I'm using 3 background images to display as icon for a mobile site which appear perfectly fine on my computer (using window sizes and user agents), however, on my iphone the icon is cut off as if the padding isn't high enough.

This is how it appears on desktop ^

However, on mobile it has this effect v

Any ideas what's causing this? the padding, when set to 20%, is enough to display the icon with a few pixels left over in all screen sizes, but even when set to 22% it doesn't display correctly so I'm assuming it's an iOS bug.

I'm using ios7 and safari if that helps!

.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;
}

解决方案

I think this is related to an issue I'm seeing:

What's happening as far as I can tell is that iOS Safari is obscuring the background of the box model with the padding. Same thing happens with the background-color property (see my post linked above).

Seems like a bug. Only workaround at this point is to remove padding for elements with backgrounds.

这篇关于填充似乎不能在iOS上正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！