Html IE9 上的 box-shadow 不使用正确的 CSS 呈现，适用于 Firefox、Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5617455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome
提问by Arowin
I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation.
我正在尝试模拟浮动模态框类型的东西，但在 IE9 及其框阴影实现方面存在问题。
Here's a summary of the code I'm using which can duplicate the issue:
这是我正在使用的代码的摘要，它可以复制问题：
<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>
It works fine in Firefox/Chrome etc but IE9 doesn't display the shadow. I can change it to an inset shadow and it appears as it should, but an outer shadow continues to elude me.
它在 Firefox/Chrome 等中运行良好，但 IE9 不显示阴影。我可以将它更改为插入阴影，它看起来应该如此，但外部阴影继续躲避我。
Anyone out there able to shed some light on this shadow problem?
任何人都能够对这个阴影问题有所了解？
回答by thirtydot
As discovered (not by me) in the comments, you must add border-collapse: separate;to the element that box-shadowis not working on.
正如在评论中发现的（不是我发现的），您必须添加border-collapse: separate;到box-shadow不起作用的元素中。
And from my original answer, also make sure you have a valid doctype as the very first line, such as <!DOCTYPE html>. Hit F12 to bring up the Developer Tools, and make sure IE9 mode (or later) is being used, because it's required for box-shadowto work.
从我的原始答案中，还要确保您有一个有效的文档类型作为第一行，例如<!DOCTYPE html>. 按 F12 调出开发者工具，并确保正在使用 IE9 模式（或更高版本），因为它是box-shadow工作所必需的。
回答by toyNN
Just confirming this issue and 2nd'ing @Arowin's final workaround since its might be missed by some folks - add border-collapse:separate;to the affected <div>- IE9 now shows the correct shadow when a <div>is contained in a <table>with border-collapse:collapse;set. Thanks!
只是确认这个问题和第二个@Arowin 的最终解决方法，因为它可能被一些人遗漏 - 添加border-collapse:separate;到受影响的<div>- 当 a<div>包含在<table>withborder-collapse:collapse;集合中时，IE9 现在显示正确的阴影。谢谢！
回答by dodortus
The IE9 input box-shadow bug solution will work on this bug.
IE9 input box-shadow bug 解决方案可以解决这个bug。
input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
border-collapse: separate;is what you need to add to resolve this issue on tables.
border-collapse: separate;是您需要添加以解决表上的此问题。
回答by David Marchelya
In my case, IE 9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
就我而言，IE 9 以兼容模式呈现文档，即使我有一个有效的DOCTYPE. 我在本地调试，并且 IE 有一个设置“在兼容性视图中显示 Intranet 站点”，显然是默认启用的。禁用此功能后，一切都按预期工作。这可以在工具 -> 兼容性视图设置下找到。
回答by Avec
The border-collapse: separate;only partially solved it for me. We have background-color added to the rows (tr) and shadow under the row that is selected (and expanded).
The border-collapse: separate;只为我部分解决了它。我们将背景颜色添加到行 (tr) 和选中（并展开）行下方的阴影。
The background-color blocks the shadow as it seems to be a z-index kind issue. Anyway we solved it with the rgba value for the color. We choose darker row color and used 20% for alpha value so the shadow underneat could be shown.
背景颜色阻挡了阴影，因为它似乎是一个 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);
}
回答by Johnny Darvall
I had athe same issue. Actually IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables with shadow - use cellspacing=0 then it works - still: bugger IE
我有同样的问题。实际上 IE9 不需要任何文档类型来使这些样式工作。导致问题的原因是带有阴影的表格上的“边框折叠：折叠” - 使用 cellpacing=0 然后它可以工作 - 仍然：bugger IE
回答by Дамян Станчев
In my case nothing helped. After hours of debugging I found that The following meta tag was the problem:
就我而言，没有任何帮助。经过数小时的调试，我发现以下元标记是问题所在：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
回答by Allisone
Yes, if you do some resetting for several html elements in your css like (I myself just copy and paste stuff from old projects, never thinking about consequences :D):
是的，如果您对 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;
}
well... cut that border-collapse: collapse
好吧……把它剪掉，border-collapse: collapse
table, tbody, tr, th, td {
border-collapse: collapse;
}
... so it's not applied to your div, p, span, img or wherever you need the shadow to be.
...所以它不适用于您的 div、p、span、img 或任何您需要阴影的地方。
回答by dfmiller
I had a div that was inside of a table cell. Using border-collapse:separateon the div solved the problem for me.
我有一个位于表格单元格内的 div。border-collapse:separate在 div 上使用为我解决了这个问题。
回答by Alex
In my case switching from Transitional to Strict XHTML-doctype helped.
在我的情况下，从 Transitional 切换到 Strict XHTML-doctype 有帮助。
Removing border-collapse from the container-table ALSO helped.
从容器表中删除边框折叠也有帮助。
