веб-приложение CSS значки сетчатки панели навигации - Как я могу разместить иконку 60x60 в фоновом изображении 30x30 на IE7 + 8?

Question

Я пытаюсь создать кросс-браузерную CSS-навигацию для мобильных и настольных ПК с помощью Jquery Mobile.

Я не хочу использовать медиазапросы для устройств с сетчаткой / без сетчатки, поэтому я в основном пытаюсь использовать одну иконку / спрайт с высоким разрешением на всех устройствах. Следующее работает хорошо, за исключением IE7 + 8.

HTML

<span class="hasIcon">
   <span class="someText"></span>
   <span class="someBackground"></span>
</span>

CSS

 .hasIcon {
   display: inline-block;
   position: static;
   height: 30px; width: 30px;
   background-color: none;
   background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
           background-size: 30px 30px;
        -o-background-size: 30px 30px;
   -webkit-background-size: 30px 30px;
      -moz-background-size: 30px 30px;
       -ms-background-size: 30px 30px;
   }

Пример JsFiddle здесь

Конечно, это обрывается в IE7 + 8, так как размер backgrond не поддерживается ...

Мой вопрос: кто-нибудь знает, как мне добиться этого эффекта в IE7 + 8?

Решения, я не хочу использовать:

• CSS Media Query для сетчатки / без сетчатки = не хватает привлекательной внешности на рабочем столе
• Поместить значки сетчатки / не-сетчатки в один спрайт и позиционировать соответственно = работает так, обслуживая больший файл

Интересно, может ли кто-нибудь мне помочь.

Спасибо!

Answer 1

Дубликат IE 8: исправление размера фона .Краткий ответ: используйте IE Filter.http://www.pziecina.com/design/turorial_demos/resize_background.php

Answer 2

Вы можете использовать filter: http://jsfiddle.net/thirtydot/QTT4N/3/

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
            sizingMethod='scale');

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx