Размытие тегов CSS3 в IE9

Кто-нибудь еще заметил, что IE9 "стандартная" реализация CSS box-shadow отличается от других браузеров? Всякий раз, когда я использую box-shadow и устанавливаю значение размытия, IE9, похоже, отображает размытие примерно на половину значения, которое делают Firefox, Safari, Chrome и Opera.

Есть ли способ обойти это? И в чем же смысл IE9, поддерживающий box-shadow как стандартное свойство, если он не выглядит так же, как box-shadow во всех других браузерах?

(Технически, Safari 5 по-прежнему поддерживает только -webkit-box-shadow, а не стандартное свойство box-shadow, но также имеет смысл одинаково визуализировать тень в Firefox 4, Chrome 11 и Opera 11. IE9 нечетный человек, несмотря на поддержку того же стандартного синтаксиса box-shadow).

Ответ 1

У меня также была эта проблема, и я решил это для себя с помощью этого script (используя jQuery).

Обратите внимание, что это экспериментально, и я не тестировал производительность. Также: вы должны запустить его снова, если вы добавите элементы в свой дом, у которого есть тень. Я предполагаю, что это можно решить, используя htc файл.

$(function(){
    fixBoxShadowBlur($('*'));
});

function fixBoxShadowBlur(jQueryObject){
    if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
        jQueryObject.each(function(){
            boxShadow = $(this).css('boxShadow');
            if(boxShadow != 'none'){
                var bsArr = boxShadow.split(' ');
                bsBlur = parseInt(bsArr[2]) || 0;
                bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
                bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
                $(this).css('boxShadow', bsArr.join(' '));
            }
        });
    }
}

Ответ 2

Используете ли вы правильный синтаксис?

-webkit-box-shadow: 2px 2px 16px #2b2b2b;
-moz-box-shadow: 2px 2px 16px #2b2b2b;
box-shadow: 2px 2px 16px #2b2b2b;

Ответ 3

К сожалению, MS, похоже, не понимает концепцию стандартов.

Я думаю, что самым простым решением является установка условной таблицы стилей.

<!--[if IE 9]> <link href="css/ie9-fix.css" rel="stylesheet" type="text/css" /> <![endif]-->

Я нашел, что мне нужно настроить примерно на 40% в IE9, чтобы соответствовать Firefox и др.

Firefox CSS:

-moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);

IE9 CSS:

-moz-box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);

Ответ 4

ie10 имеет ту же проблему. Чтобы атаковать как ie9, так и ie10, вы можете использовать этот взлом css. Нет необходимости в комментариях. (Только для CSS)

.yourclass {
  -moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -o-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  box-shadow: 0px 0px 11px rgba(0, 0, 0, .7); 
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
 .yourclass {
   box-shadow: 0px 0px 18px rgba(0, 0, 0, .7); 
 }
}

(Воспроизведение с значениями ie)