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: 5px 5px 5px #cccccc;
     -moz-box-shadow: 5px 5px 5px #cccccc;
}

Thanks

Answer 1

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 2

By default IE was setting up IE10 Compatibility mode which should be replaced with IE 9 using meta-tag. So, whenever it will be running on other browsers then it will use the CSS that will be compatible with IE9. As in IE10 Compatibility mode box-shadow CSS property has been removed from the library

We can use meta-tag in head just to change the document compatibility level:

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

Above tag is showing that make this document compatible with IE8 and IE9 for browsers other than IE8 and IE9 switch CSS level to IE9.