CSS Box-Shadow Not Working in IE

Question

How would I get this to work in IE?

.fancy {
     border: 1px solid black;
     margin: 10px;
     box-shadow: 5px 5px 5px #cccccc;
     -webkit-box-shadow:          


        

Answer 1

You could also use http://css3pie.com/

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Answer 2

On your site, this CSS rule is preventing box-shadow from working in IE9:

table, table td {
    border-collapse: collapse;
}

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

You must add border-collapse: separate; to the element that box-shadow is not working on.

So, this should fix the problem for you:

.fancy {
    border-collapse: separate;
}

Answer 3

The probably most elegant and functionable way to set IE-specific styling today are media-queries. Despite they're not the most beautiful, it work's reliable without making use of filters or even JS.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

For more Details see: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

Answer 4

I believe this issue is specific to your browser, because it works for me in this jsFiddle on both IE9 & Chrome. The link you provided works in Chrome, but not in IE9. This would indicate that the issue is specific to your implementation.

I would check to make sure that compatibility mode is disabled, and also make sure you don't have any settings enabled that would interfere with CSS. I would also suggest testing this in multiple browsers and using process of elimination to determine why it isn't working.

EDIT

I was just looking at your markup. Try removing this line and see if it makes a difference:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 5

On IE you need to use filter for that effect.

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

Answer 6

box-shadow is supported from IE9 onwards.

There are plenty of sites out there describing how to do this for older IEs. One of them is: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Also check out: http://www.css3.info/preview/box-shadow/

My personal opinion in general on making older browsers do things they actually cannot is this: Avoid it. Instead apply the principles of progressive enhancement. Also explain to your client that solving problems of outdated, non standard browsers with non standard solution, is very time consuming and probably not worth the effort.