html - IE9 上的 box-shadow 无法使用正确的 CSS 呈现，但适用于 Firefox、Chrome

我正在尝试模拟一个 float 模式框类型的东西，但在 IE9 及其框阴影实现方面遇到了问题。

以下是我正在使用的可能会重复该问题的代码的摘要:

<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>

它在 Firefox/Chrome 等中工作正常，但 IE9 不显示阴影。我可以将其更改为内嵌阴影，它会按应有的方式显示，但我仍然无法看到外部阴影。

有人能阐明这个影子问题吗？

最佳答案

正如在评论中发现的(不是我发现的)，您必须添加 border-collapse: separate; box-shadow 的元素不工作。

从我原来的回答来看，还要确保你有一个有效的文档类型作为第一行，例如 <!DOCTYPE html> .按 F12 调出开发人员工具，并确保正在使用 IE9 模式(或更高版本)，因为 box-shadow 需要它。去工作。

关于html - IE9 上的 box-shadow 无法使用正确的 CSS 呈现，但适用于 Firefox、Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5617455/