Internet Explorer - CSS box-shadow僅限容器div的陰影

Question

以下是我的網站的CSS。 box-shadows完美適用於Chrome和Firefox，但我無法在Internet Explorer 9及更低版本中正常工作。它確實在IE 10上正常工作。我希望盒子陰影只能圍繞容器div。真的不在乎盒子的陰影是否圍繞着topleft 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; 
} 

Answer 1

IE9正確支持box-shadow，但過濾器會干擾它。過濾器實際上工作正常，但不在您期望的位置。你會注意到它是在子元素周圍添加一個過濾器。這是因爲它是一個陰影，並且您的容器的背景是透明的。您可以通過添加背景顏色的div容器修復：

#container { background-color: white; }