android中的背景位置不显示

Question

我有以下css：

.flag
{

    background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg');
    width: calc(4 * 5.93px);
    height: calc(4 * 3.99px);
    background-size: calc(4 * 35.08px) calc(4 * 49.63px);
    cursor:pointer;

}
.flag.portugal
{
    float: left;
    background-position: calc(4 * -14.62px) calc(4 * -30.42px);
}
.flag.reinoUnido
{
    float: right;
    background-position: calc(4 * -21.40px) calc(4 * -40.22px);
}

以及对应的html：

<div class="flag contentor">
    <div class="flag portugal" onclick="$('.lang').removeClass('mostra');$('.lang.portugal').addClass('mostra');"></div>
<div class="flag reinoUnido" onclick="$('.lang').removeClass('mostra');$('.lang.reinoUnido').addClass('mostra');"></div>
</div>

在我的笔记本电脑上它运行良好，但在我的安卓平板电脑上它只显示两个白色方块。

我在定位背景时做错了什么？是不是和平板的浏览器有些不兼容？

我使用的图片是：

我需要在 div 中显示葡萄牙国旗和英国国旗，如下所示：

有没有什么 polyfill/shim 可以用来纠正这个问题？

Answer 1

calc() 用于计算不同度量，例如100% - 24px、15em * 14% 等。您有确切的度量，因此您不需要计算。也许这就是问题所在。我假设你的背景图像句子在你的代码中很好。但是，我不知道您为什么要在像素大小上设置 2 位小数，这对我来说似乎是无意义的。

.flag
{
    background-image: url('http://192.168.1.88/david/images/flag_set');
    width: 23.72px;
    height: 15.96px;
    background-size: 140.32px  198.52px;
    cursor:pointer;

}
.flag.portugal
{
    float: left;
    background-position: -58.48px -121.68px;
}
.flag.reinoUnido
{
    float: right;
    background-position: -85.6px  -160.88px;
}