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

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.

Answer 2

It's already 2018, happens the same with IE11. Sometimes the box-shadow doesn't work, but sometimes it does.

I tried this with IE11 and IE10: Try changing the display of the element where you want to add the shadow (usually "display: block" works fine):

.fancy {
  display: block;
  border: 1px solid black;
  margin: 10px;
  box-shadow: 5px 5px 5px #ccc;
}

Answer 3

For me, the problem was that IE doesn't seem to like hex colors with 8 digits (the last two were for the alpha channel). I solved the problem by switching from hex colors to rgba() colors.

I discovered this by accident and I'm surprised I haven't seen it documented anywhere yet!

Answer 4

It works fine in IE 9.

Earlier versions doesn't support box-shadow, but you can use a filter:

zoom: 1;
filter:
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);

Read: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Answer 5

Adding display: block; to CSS class works for me in IE11...

Answer 6

From google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Probably not exactly as you want it, but fiddle around with it or look into DXImageTransform some more.