CSS3框阴影模糊在IE9

前端之家收集整理的这篇文章主要介绍了CSS3框阴影模糊在IE9前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有其他人注意到IE9的“标准”CSS框阴影实现与其他浏览器不同?每当我使用Box-shadow并设置一个模糊值,IE9似乎渲染了大约一半的Firefox,Safari,Chrome和Opera的一半.

有没有办法解决?如果在所有其他浏览器中看起来与Box-shadow不一样,IE9支持Box-shadow的标准是什么?

(技术上来说,Safari 5仍然只支持-webkit-Box-shadow,而不是标准的Box-shadow属性,但它也恰好在Firefox 4,Chrome 11和Opera 11中与Box-shadow相同.IE9是奇怪的尽管支持相同的标准Box-shadow语法).

解决方法

我也有这个问题,并用自己的脚本解决了(使用jQuery).

请注意这是实验性的,我没有测试性能.另外:如果您添加元素到您的dom,它必须再次运行它有盒子阴影.我想可以使用htc-file来解决.

$(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(' '));
            }
        });
    }
}

猜你在找的CSS相关文章