Есть ли способ заставить этот CSS работать в большинстве версий IE?

Question

У меня есть этот код для отбрасывания тени на imagese:

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
}

Это работает в FF, Opera, Safari, Chrome, но не в IE6 (еще не тестировал ни одну другую версию IE)

Спасибо

ОБНОВЛЕНИЕ:

 <img src="......" class="shadow">

Не указана ширина или высота ...

Проблема в том, что тень четкая и полностью черная, а неисчезает, как тень, и, как, например, в FF.Трудно описать ... Тень есть, но она не поблекла, это как черный ящик за изображением.

Answer 1

Элемент должен иметь макет ( из MSDN ):

Почти к любому объекту могут быть применены фильтры.Однако объект, к которому применяется фильтр, должен иметь макет, прежде чем отобразится эффект фильтра.Проще говоря, с макетом означает, что объект имеет определенную высоту и ширину.Некоторые объекты, например элементы управления формой, имеют макет по умолчанию.Все другие фильтруемые объекты получают компоновку, устанавливая свойство высоты или ширины, устанавливая свойство позиции в absolute, устанавливая свойство writingMode в tb-rl или устанавливая свойство contentEditable в true.

Также см. Наличие макета для получения более подробной информации.

Обратите также внимание, что синтаксис filter будет работать только в IE6 и IE7. IE8 требуется вместо этого свойство -ms-filter, а его значение должно быть в кавычках .

Короче говоря, чтобы оно работало в IE6, добавьте zoom: 1 и заставьте его работать вВ IE8 также добавьте свойство -ms-filter (перед свойством filter!):

.shadow {
    box-shadow: -2px 2px 4px #666;
    -webkit-box-shadow: -2px 2px 4px #666;
    -moz-box-shadow: -2px 2px 4px #666;
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true)";
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);
    zoom: 1;
}

Answer 2

используйте что-то подобное и измените в соответствии с вашими потребностями:

.shadow{
box-shadow: -2px 2px 4px #666;
-webkit-box-shadow: -2px 2px 4px #666;
-moz-box-shadow: -2px 2px 4px #666;
cursor:hand;
height:160px; 
padding:10px;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=2,  Color=#666, Positive='true');
}

это работает т.е. 7 и 8 (у меня нет 6).

Answer 3

Использование двоеточия в свойстве CSS определенно некорректно.Правильный способ обращения к этим фильтрам DX выглядит следующим образом:

filter: progid_DXImageTransform.Microsoft.dropShadow(color=#666, offX=-2, offY=2, positive=true);