Box-Shadow on Ie9 Doesn't Render Using Correct CSS, Works on Firefox, Chrome

box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

As discovered (not by me) in the comments, you must add border-collapse: separate; to the element that box-shadow is not working on.

And from my original answer, also make sure you have a valid doctype as the very first line, such as <!DOCTYPE html>. Hit F12 to bring up the Developer Tools, and make sure IE9 mode (or later) is being used, because it's required for box-shadow to work.

Box-shadow CSS style not working in IE9?

this works for me in IE9:

box-shadow: 0px 0px 4px 0px rgba(28, 24, 28, 0.65);

same with hex:

box-shadow: 0px 0px 4px 0px #000000;

If this don't help, try this:
Press F12 and read what browsermod/documentmode you use. Than we can help you more.

CSS3 box-shadow blur in IE9

I also had this problem and solved it for myself with this script (using jQuery).

Please note this is experimental and I haven't tested performance. Also: You have to run it again if you add elementss to your dom which has box-shadow. I guess that could be solved using a htc-file instead.

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

Not all CSS styles applied when page opened in IE 9 in a frame, which puts it into Quirks mode

The only thing that worked thus far was going into the menu, Tools/Compatibility View Settings and un-cheking Display Intranet sites in Compatibility View checkbox.

Still looking for a programmatic solution, as this is nothing but a per-user workaround.

css shadows are fine with firefox and chrome but not showing on Internet Explorer

-moz-box-shadow: 0 0 20px #000; is only for FireFox.

You can use box-shadow: 0 0 20px #000;

IE < 9 needs some help. You need something like this

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20);

-ms-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20)";
        zoom: 1;

You'll have to play with the values.

All together it could be

.something{
    -moz-box-shadow: 0 0 20px #000;
    -webkit-box-shadow: 0 0 20px #000;
    box-shadow: 0 0 20px #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.20)"; zoom: 1;
}

Box-Shadow on Ie9 Doesn't Render Using Correct CSS, Works on Firefox, Chrome