Search code examples
internet-explorer-8cssdropshadow

Quick drop shadow css question for ie8 not working


Just a quick simple question, this css code will not work in ie8 for a drop shadow, any ideas why it wouldn't work?

/* Drop shadow */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);

Solution

  • I am not sure if this is an IE8 bug but if you add a background-color it seems to work as expected.

    In Chrome, removing the background-color leaves the drop shadow, but in IE8 the text inherits the drop shadow and looks awful. If you have a solid background you could match the background on the elements you want the drop shadow on. Unfortunately transparent results in the same problem in IE8.