box-shadow在IE9不使用正确的CSS渲染，适用于Firefox，Chrome [英] box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome
问题描述
我试图模拟一个浮动模态框类型的东西，但有一个问题与IE9及其框阴影实现。
这里是一个代码的摘要我' m使用它可以复制问题：
< html>
< head>
< title>示例页< / 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>标题< / h2>
< p class =subtext>这里有一些文字< / p>
< p>更多文字< / p>
< a class =buttonhref =＃> A按钮< / a>
< / div>
< / div>
< / td>
< / tr>
< / table>
< / body>
Chrome等，但IE9不显示阴影。我可以把它改成一个插图阴影，它似乎它应该，但一个外面的阴影继续逃避我。
任何人都能在这个阴影问题？
解决方案在评论中发现（不是由我），您必须添加
border-collapse ：
从我原来的答案，还要确保你有一个有效的doctype作为第一行，如
<！DOCTYPE html>。点击F12打开开发工具，并确保正在使用IE9模式（或更高版本），因为box-shadow可以工作。I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation.
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.
Anyone out there able to shed some light on this shadow problem?
解决方案As discovered (not by me) in the comments, you must add
border-collapse: separate;to the element thatbox-shadowis not working on.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 forbox-shadowto work.这篇关于box-shadow在IE9不使用正确的CSS渲染，适用于Firefox，Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
