фон положение в андроиде не показывает

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> 

В моем ноутбуке она прекрасно работает, но в моем андроиде планшетов это только показывает два белых квадрата.

Я что-то не так позиционирую фон? это какая-то несовместимость с браузером планшета?

изображение я использую:

И что мне нужно, чтобы показать в дивы являются флаг Португалия, Соединенное Королевство флаг, как это:

Есть ли полипол/шайба, которую я мог бы исправить?

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