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

I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation.

Here's a summary of the code I'm using which can duplicate the issue:

<html>
<head>
    <title>Sample page</title>
    <style>
        .content-holder {
            border-collapse: collapse;
        }
        .back {
            background-color: #a8c0ff;
            padding: 100px;
        }

        .inner {
            background-color: #fff;
            text-align: center;
            padding: 50px;
            box-shadow: 0px 0px 20px #000;
        }

    </style>
</head>
<body>
    <table class="content-holder">
        <tr>
            <td>
                <div class="back">
                    <div class="inner">
                        <h2>Heading</h2>
                        <p class="subtext">Some text here</p>
                        <p>More text</p>
                        <a class="button" href="#">A button</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

It works fine in Firefox/Chrome etc but IE9 doesn't display the shadow. I can change it to an inset shadow and it appears as it should, but an outer shadow continues to elude me.

Anyone out there able to shed some light on this shadow problem?

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.

Just confirming this issue and 2nd'ing @Arowin's final workaround since its might be missed by some folks - add border-collapse:separate; to the affected <div> - IE9 now shows the correct shadow when a <div> is contained in a <table> with border-collapse:collapse; set. Thanks!

The IE9 input box-shadow bug solution will work on this bug.

input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}

border-collapse: separate; is what you need to add to resolve this issue on tables.

In my case, IE 9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.

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

Related

Recent Posts