Internet explorer Internet Explorer-仅容器div周围的CSS框阴影

这是我网站的css。方块阴影在chrome和firefox上非常有效，但我无法让它在InternetExplorer9和更低版本上正常工作。它在IE10上确实工作正常。我希望长方体阴影只环绕容器div。不在乎长方体阴影是否围绕左上角div工作，但如果这是一个简单的修复方法，请随时提供帮助。谢谢你抽出时间

@charset "utf-8";
body {
margin: 0;
padding: 0;
border: none;
background-color: #FFF;
}
html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;
}
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
box-shadow: 0px 2px 15px 0px #000;
-moz-box-shadow: 0px 2px 5px 0px #000;
-webkit-box-shadow: 0px 2px 15px 0px #000;
/* For IE 8 */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0)";*/
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90)";
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180)";
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270)";
/* for IE 5.5 - 7 */
 filter:
   /* progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#cccccc'),*/
    progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#cccccc'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#cccccc'),
    progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#cccccc');
}

#container #topbox {
padding:0;
margin:0;
height: 35px;
width: 1000px;
}
#container #topnav {
height: 35px;
width: 750px;
float:left;
}
#container #cse
{
height: 20px;
width: 250px;
float: left;
text-align: center;
padding-bottom: 15px;
vertical-align: middle;
margin-top: -10px;
}

#container #Topleft {
height: 200px;
width: 250px;
border: 5px solid #EAEAEA;
-webkit-transform: rotate(-2deg);  /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-2deg);  /* Firefox 3.5-15 */
-ms-transform: rotate(-2deg);  /* IE 9 */
-o-transform: rotate(-2deg);  /* Opera 10.50-12.00 */
transform: rotate(-2deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 0px 2px 15px 0px #000;
-moz-box-shadow: 0px 2px 5px 0px #000;
-webkit-box-shadow: 0px 2px 15px 0px #000;
background-color: #FFF;
}
#container #TopRight {
height: 150px;
width: 740px;
}
#container #banner {
height: 100px;
width: 670px;
padding-left: 70px;

}
#container #alertmessage {
height: 50px;
width: 740px;
background-color: #006;
}
#alertmessagebox {
width: 730px;
height: 45px;
padding-left: 5px;
padding-top: 5px;
overflow: hidden;
font-size: 1em;
color: #CCC;
font-weight: bold;
text-align: center;
text-transform: uppercase;
/*display: table-cell;
vertical-align: middle;*/
}
#container #SideNav {
width: 260px;

}
#container #leftcol {
float: left;
padding-bottom: 150px;
/*background-color: #FFF;*/
}
#container #rightcol {
float: left;
}
#container #Body {
width: 740px;
height: auto;
background-color: #33F;
}
#container #Footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
background-color: #006;
width: 1000px;
clear: both;
color: #CCC;
text-align: center;
}

---

IE9正确地支持长方体阴影，但过滤器会干扰它。过滤器实际上工作正常，但不是您期望的位置。您将注意到它正在子元素周围添加一个过滤器。这是因为它是一个阴影，并且容器的背景是透明的。您可以通过向容器div添加背景色来修复它：

#container { background-color: white; }

---

由于没有HTML，这将是相当困难的，如果不是不可能的，调试。请考虑制作一个JSFIDLE演示，包括HTML和CSS需要重现的问题。这里是网站…明天我会试着给你做一个午餐。感谢您关注这个问题。对于IE9来说，过滤器会遮住盒子的阴影。如果你去掉它，它就可以正常工作。我将从样式表中删除过滤器，并仅使用条件注释将其提供给IE8及以下版本。至于IE8及以下版本，它们不支持box-shadow。仔细查看过滤器后，我发现了它的问题。我会提供一个答案。太棒了，差不多完美了。只有一个问题。如果我把这行注释掉，在ie9中我没有得到正确的一面，但在8中看起来很完美。但如果我把它放在ie8上，我的搜索框就会有一个顶栏，ie9看起来很完美。progid:DXImageTransform.Microsoft.Shadow（强度=5，方向=0，颜色='#cccc'），是否要修复此问题以使其同时适用于两者？我不确定您的意思。我看不出您在哪里使用该代码。它位于我的css中，在我的#container div下，有我所有的框阴影。如果你往上面看，它就被注释掉了。我取消了它在IE9中的注释，但在ie8中，我的google搜索只有上边框。如果没有测试用例，很难进行测试，尤其是在调试器中没有显示的注释掉的代码。我建议你调整一下滤镜的方向，或者看看是什么导致了页面顶部的空白，比如页边空白或者一些元素可能会把页面往下推。