IE9上的box-shadow不会使用正确的CSS呈现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我试图模拟浮动模式框类型的东西,但有一个问题

以下是我正在使用的代码的摘要,它可以重现此问题:

<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不工作的元素。

用户回答回答于

添加border-collapse:separate;到受影响的<div>,当IE9现在显示正确的阴影- <div>包含在<table>border-collapse:collapse;组。

所属标签

可能回答问题的人

  • 爸爸

    腾讯 · 客户端安全 (已认证)

    4 粉丝4 提问5 回答
  • 找虫虫

    0 粉丝0 提问5 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问4 回答
  • uncle_light

    5 粉丝518 提问4 回答

扫码关注云+社区

领取腾讯云代金券