2013-07-31 3 views
-1

Я использую эту class и это id (например), чтобы добавить изображение на одном DIV:фон-размер не работает в IE

.icones { 
    background: transparent url('../contents/homepage/60/icones.png') no-repeat; 
    display: inline-block; 
    width: 50px; 
    height: 48px; 
    background-size: 60px; 
} 
#contact { 
    background-position: 0px -60px; 
} 

С Chrome, все нормально, все выглядит отлично и все свойства показаны в element inspector, но в IE есть проблема.

При осмотре страницы с помощью инструмента разработки на IE, я увидел, что «background-size» не отображается.

Я знаю, что это проблема, которая вызывает у меня проблемы, потому что, когда я спрячу ее на chrome, у меня есть та же страница, что и в IE.

Так что мой вопрос: Как я могу заставить IE применить этот background-size?

СПАСИБО!

EDIT:

Таким образом, даже с фильтром, это не похоже на работу:

.icones { 
     background: transparent url('../contents/homepage/60/icones.png') no-repeat; 
     display: inline-block; 
     width: 50px; 
     height: 48px; 
     background-size: 60px; 

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')"; 
} 
#contact { 
    background-position: 0px -60px; 
} 

Решение:

редактировать фотографии размером вручную и забыть фона -размер. Все в порядке!

+1

Какая версия IE у вас есть? – Keith

+0

@clement, у вашего вопроса уже есть решение. Проверьте ссылку выше. Также в следующий раз, прежде чем вы спросите quesion в SO, убедитесь, что его не задали до – AnaMaria

+0

@MrLister: Спасибо за ваш совет, но я уже пробовал это решение: -/ – clement

ответ

0

Для IE вы должны использовать определенный CSS фильтр:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png', 
sizingMethod='scale'); 

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png', 
sizingMethod='scale')"; 

Или использовать JQuery для достижения эффекта, как это объясняется в этом link.

+0

Спасибо Антонио. Я сделал это, но, похоже, это не работает в моем проекте (см. Мой обновленный первоначальный пост) – clement