在IE9的盒子阴影不会渲染使用正确的CSS，适用于Firefox，Chrome
我试图模拟浮动模式框types的东西，但有一个问题与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不显示阴影。 我可以把它改变成一个插入的阴影，它看起来应该是这样，但外面的阴影仍然逃避我。
那里的任何人都可以对这个阴影问题有所了解？
正如发现（而不是我）在评论中，你必须添加border-collapse: separate; 到box-shadow不工作的元素。
从我原来的答案，也请确保您有一个有效的文档types作为第一行，如<!DOCTYPE html> 。 点击F12调出开发工具，并确保IE9模式（或更高版本）正在使用，因为它需要box-shadow才能工作。
只是确认了这个问题，并且由于某些人可能错过了Arowin的最终解决方法，所以添加了border-collapse:separate; 到受影响的<div> – IE9现在使用border-collapse:collapse;在<table>包含<div>时显示正确的阴影border-collapse:collapse; 组。 谢谢！
IE9input框 – 影子错误解决scheme将在这个错误。
input{ box-shadow: 0px 0px 5px #3699FF; border-collapse: separate; }
border-collapse: separate; 是你需要添加来解决表上的这个问题。
我有同样的问题。 实际上，IE9不需要这些样式的任何文档types的工作。 什么导致的问题是“边界崩溃：崩溃”在阴影表 – 使用cellspacing = 0然后它的工作 – 仍然：bugger IE
The border-collapse: separate; 只是部分解决了我。 我们将背景颜色添加到选定（和展开）行下的行（tr）和阴影。
背景颜色阻止了阴影，因为它似乎是一个Z索引种类的问题。 无论如何，我们用颜色的rgba值来解决它。 我们select较深的行颜色，并使用20％的阿尔法值，所以可以显示阴影underneat。
table {border-collapse：separate;}
tr：nth-child（偶数）{/ * odd color transparent * /
/ * background-color：someothercolor; * / / *阴影不显示通过纯色* /
background-color：rgba（168,163,136，.2）;
}
在我的情况下，即使我有一个有效的DOCTYPE IE 9是以兼容模式呈现文档。 我在本地debugging，IE浏览器有一个设置“在兼容性视图显示Intranet站点”已启用，显然默认情况下。 禁用这个之后，一切都按预期工作。 这可以在工具 – >兼容性视图设置下find。
在我的情况没有任何帮助。 经过几个小时的debugging，我发现下面的meta标签是个问题：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
是的，如果你在你的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或者你需要的影子。
我有一个表格单元内的div。 使用border-collapse:separate在div上border-collapse:separate解决了我的问题。
在我的情况下，从过渡到严格的XHTML-doctype切换帮助。
从容器表中删除border-collapse也有帮助。
这个meta标签为我解决了它。 它还解决了Chrome和Firefox中不存在的其他奇怪的IE问题：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
