首页 文章

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

提问于
浏览 次
71

我正在尝试模拟浮动模式框类型的东西，但有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不显示阴影 . 我可以把它改成一个插入的阴影，它看起来应该如此，但外面的阴影继续躲避我 .

那里的任何人都可以解释这个影子问题吗？

html css internet-explorer-9 css3

11 回答

  • 1

    正如在评论中发现的那样（不是我），您必须将 border-collapse: separate; 添加到 box-shadow 未处理的元素中 .

    根据我的原始答案，还要确保您有一个有效的doctype作为第一行，例如 <!DOCTYPE html> . 点击F12打开开发人员工具，确保使用IE9模式（或更高版本），因为 box-shadow 需要它才能工作 .

    回复于
  • 0

    只是确认了这个问题和第二个'ing @Arowin'的最终解决方法，因为它可能会被一些人错过 - 将 border-collapse:separate; 添加到受影响的 <div> - IE9现在显示正确的阴影，当 <table> 包含在 <table> 中并设置了 border-collapse:collapse; 时 . 谢谢！

    回复于
  • 3

    IE9输入框阴影错误解决方案将适用于此错误 .

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

    border-collapse: separate; 是您需要添加以解决表上的此问题 .

    回复于
  • 3

    我遇到了同样的问题 . 实际上IE9不需要任何doctype来使这些样式工作 . 导致问题的是带有阴影的表上的“border-collapse：collapse” - 使用cellspacing = 0然后它可以工作 - 仍然：bugger IE

    回复于
  • 4

    The border-collapse: separate; 只为我部分解决了它 . 我们将背景颜色添加到行（tr）和阴影下选择（和展开）的行 .

    背景颜色阻挡阴影，因为它似乎是一个z索引类问题 . 无论如何，我们用颜色的rgba值解决了它 . 我们选择较暗的行颜色并使用20％作为alpha值，因此可以显示阴影不足 .

    table { border-collapse: separate;}

tr:nth-child(even) { /* odd color transparent */
    /* background-color: someothercolor; */ /*shadow did not display thru solid color */
    background-color: rgba(168,163,136,.2);
}
    回复于
  • 1

    就我而言，IE 9正在以兼容模式呈现文档，即使我有一个有效的 DOCTYPE . 我在本地进行调试，IE有一个设置"Display intranet sites in Compatibility View"，显然是默认启用的 . 禁用此功能后，一切都按预期工作 . 这可以在工具 - >兼容性视图设置下找到 .

    回复于
  • 111

    就我而言，没有任何帮助 . 经过几个小时的调试后，我发现以下元标记是问题所在：

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    回复于
  • 19

    是的，如果你为你的css中的几个html元素做一些重置（我自己只是从旧项目中复制和粘贴东西，从不考虑后果：D）：

    html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul,
li, legend, table, tbody, tr, th, td {
    order:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit; 
    border-spacing: 0;
    border-collapse: collapse;
}

    嗯...削减边界崩溃：从那里坍塌并将其作为一个单独的添加

    table, tbody, tr, th, td {
    border-collapse: collapse;
}

    ...所以它不适用于你的div，p，span，img或任何你需要阴影的地方 .

    回复于
  • 3

    我有一个在 table 内部的div . 在div上使用 border-collapse:separate 解决了我的问题 .

    回复于
  • 0

    在我的情况下，从Transitional切换到Strict XHTML-doctype帮助 .

    从容器表中删除边框折叠也有帮助 .

    回复于
  • 1

    这个元标记为我解决了它 . 它还解决了Chrome和Firefox中没有出现的其他奇怪的IE问题：

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    回复于

相关问题