CSS3 box-shadow blur в IE9 - PullRequest
Новая
       30

CSS3 box-shadow blur в IE9

14 голосов
/ 12 мая 2011

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

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

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

Ответы [ 4 ]

3 голосов
/ 12 мая 2011

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

-webkit-box-shadow: 2px 2px 16px #2b2b2b;
-moz-box-shadow: 2px 2px 16px #2b2b2b;
box-shadow: 2px 2px 16px #2b2b2b;
2 голосов
/ 22 февраля 2013

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)

2 голосов
/ 08 июня 2011

К сожалению, 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);
1 голос
/ 01 июня 2011

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

Обратите внимание, что это эксперимент, и я не тестировал производительность. Также: Вы должны запустить его снова, если вы добавляете элементы в ваш домен, у которого есть box-shadow. Я думаю, что это можно решить с помощью 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(' '));
            }
        });
    }
}
...