IE9上的框阴影无法使用正确的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 internet-explorer-9 css

— 阿罗文
source

只是遇到了同样的问题[插入拳头摇动]

— 2013年

112

正如评论中发现的（不是我本人），您必须添加border-collapse: separate;到box-shadow不起作用的元素。

根据我的原始答案，还请确保您具有有效的doctype作为第一行，例如<!DOCTYPE html>。按F12键以打开开发人员工具，并确保正在使用IE9模式（或更高版本），因为它是box-shadow工作所需的。

— 三十点
source

为此，该示例页面的问题在于缺少文档类型。不幸的是，该问题对于我正在使用的实际站点仍然存在。布局与我提供的示例非常相似，但是我似乎没有做任何允许背景阴影的操作（但插图有效）。我担心我可能找不到问题，可能只是他们所生活的东西

— 而已

如果您满意，那么对我也不错:)尽管，如果您可以创建一个肯定会发生问题的（JS Bin）测试用例，我将再次进行研究。

— 2011年

16

好的，我对此进行了更多调查，然后发现了问题所在。。。叹息。所以，我在网站上看到的div位于一个桌子（旧学校桌子的布局）中，该桌子的border-collapse设置为“ collapse”。由于某种原因，设置该框意味着不会绘制阴影。我只需要关闭边界折叠即可，并且可以正常工作...我将尝试在此处发布示例代码，以便其他人可能知道它-谢谢您的帮助:)

— Arowin 2011年

感谢您让我知道这个问题背后的实际问题，我会记住它以便将来参考。

— 2011年

3

缺少文档类型不是问题-边界折叠是

— Johnny Darvall

19

只需确认此问题，然后第二遍@Arowin的最终解决方法，因为某些人可能会忽略它-添加border-collapse:separate;到受影响的对象中<div>-当with中<div>包含a时，IE9现在显示正确的阴影。谢谢！<table>border-collapse:collapse;

— 玩具网
source

这是我的问题；设置border-collapse在div与box-shadow合作。

— Sarah Vessels，

4

IE9输入框阴影错误解决方案将对此错误起作用。

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

border-collapse: separate; 您需要添加什么才能解决表上的此问题。

— 多多尔图斯
source

4

就我而言，即使我有一个有效的，IE 9仍以兼容模式呈现文档DOCTYPE。我在本地调试，IE的设置“在兼容性视图中显示Intranet站点”已启用，显然是默认设置。禁用此功能后，一切都会按预期进行。可以在工具->兼容性视图设置下找到。

— 戴维·马尔凯利亚
source

3

我有同样的问题。实际上，IE9不需要任何文档类型即可使用这些样式。导致问题的原因是带有阴影的表上的“边框折叠：折叠”-使用cellspacing = 0然后起作用了-仍然：bug IE

— 约翰尼·达瓦尔
source

1

糟糕-很抱歉，我在测试中并不完全正确-看来doctype对于这些功能正常工作至关重要。但是随后其他一切都崩溃了。我认为下一次生病是为IE首先写的，然后是其他人-嘿，这就是微软的策略！

— 约翰尼·达瓦尔

1

代替cellspacing=0，使用style="border-collapse: separate; border-spacing:0;"让一切纯CSS

— daiscog

3

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

背景色阻止了阴影，因为它似乎是z索引类型的问题。无论如何，我们用颜色的rgba值解决了它。我们选择较暗的行颜色，并使用20％作为alpha值，以便可以显示下面的阴影。

表{border-collapse：独立的；}

tr：nth-child（even）{/ *奇数透明* /
    / *背景颜色：someothercolor; * / / *阴影未显示为纯色* /
    background-color：rgba（168,163,136，.2）;
}

— Avec
source

1

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

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

— ДамянСтанчев
source

1

是的，如果您要对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或需要阴影的任何地方。

— 阿里松
source

1

我在表格单元格内有一个div。border-collapse:separate在div上使用可以为我解决问题。

— dfmiller
source

0

以我为例，从过渡性转换为严格XHTML文档类型很有帮助。

从容器表中消除边界崩溃也很有帮助。

— 亚历克斯
source

0

这个meta标签为我解决了。它还解决了Chrome和Firefox中不会发生的其他奇怪的IE问题：

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

— 肖恩
source