IE8 игнорирует стили CSS

Question

У меня есть страница, которая использует CSS-фильтр AlphaImageLoader для IE8, например:

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

В моем тестовом IE8 (Windows XP, заводские настройки) все в порядке.Однако клиент получил скриншот от кого-то, утверждающего, что он также использует IE8, и похоже, что браузер полностью игнорирует директиву filter.Все другие стили в IE-специфичной таблице стилей, загруженные через условные комментарии, работают.Есть ли какие-либо настройки в IE или в Windows, которые могут вызвать это?

Спасибо, Саймон

Answer 1

IE8 заменил filter на -ms-filter.

Если вы хотите поддерживать все версии IE, вам необходимо предоставить оба этих стиля.

Синтаксис для -ms-filterтакже немного отличается от filter:

• Все фильтры теперь указываются с полной строкой progid (согласно вашему примеру, но некоторые фильтры ранее могли быть указаны с более короткой строкой).синтаксис).

• Значение -ms-filter должно быть заключено в кавычки.Это сделано для того, чтобы предотвратить недопустимый синтаксис CSS (поскольку он содержит двоеточие после progid, это недопустимый CSS; известно, что в плохих случаях это вызывает ошибки синтаксического анализа в других браузерах, которые мешают им правильно читать остальную часть файла CSS).

Итак, в вашем примере вам нужны следующие стили:

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

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

Надеюсь, это поможет.

Answer 2

Этот простой тестовый пример: http://fiddle.jshell.net/TyMxr/show/light/

<div></div>

div {
    border: 2px solid red;
    width: 256px;
    height: 256px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}

работает в IE6, IE7, IE8, IE9 и в режиме Quirks в любой из этих версий.

Я не могу думатьпо какой-то причине это не сработает в IE.

У вас есть тестовая страница для просмотра?Я думаю, что-то еще должно происходить.