Question

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

那里的任何人都可以对这个影子问题有所了解吗？

Answer 1

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

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

Answer 2

只是确认了这个问题和第二次@Arowin的最终解决方法，因为有些人可能会错过 - 将border-collapse:separate;添加到受影响的<div> - IE9现在显示正确的阴影{{1 } {}包含在<div>集<table>中。谢谢！

Answer 3

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

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

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

Answer 4

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

Answer 5

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

背景颜色会阻挡阴影，因为它似乎是一个z-index类问题。无论如何，我们用颜色的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);
}

Answer 6

在我的情况下，IE 9正在以兼容模式呈现文档，即使我有一个有效的DOCTYPE。我在本地进行调试，并且IE在“兼容性视图中显示Intranet站点”设置已启用，显然默认情况下已启用。禁用此功能后，一切都按预期工作。这可以在工具 - ＆gt;下找到。兼容性视图设置。

Answer 7

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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Answer 8

是的，如果你为你的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;
}

嗯......将那个 ~~border-collapse: collapse~~ 从那里切掉并将其作为一个单独的

添加

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

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

Answer 9

我有一个位于表格单元格内的div。在div上使用border-collapse:separate解决了我的问题。

Answer 10

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

从容器表中删除border-collapse也有帮助。

Answer 11

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

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

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

11 个答案: