Question

有没有人注意到IE9的CSS标准阴影的“标准”实现与其他浏览器不同？每当我使用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中的box-shadow相同.IE9是奇怪的人，尽管支持相同的标准盒阴影语法）。

Answer 1

您使用的是正确的语法吗？

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

Answer 2

不幸的是，MS似乎并不理解标准的概念。

我认为最简单的解决方案是设置条件样式表。

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

我发现我需要在IE9中调整大约40％来匹配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);

Answer 3

ie10有同样的问题。要同时针对ie9和ie10，您可以使用此css hack。无需收到任何意见。（仅限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值）

Answer 4

我也遇到了这个问题并使用这个脚本（使用jQuery）解决了这个问题。

请注意这是实验性的，我没有测试过性能。另外：如果你将元素添加到具有box-shadow的dom，你必须再次运行它。我想这可以用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(' '));
            }
        });
    }
}

IE9中的CSS3框阴影模糊

4 个答案: