Question

这是我的网站的CSS。盒子阴影适用于chrome和firefox，但是我无法让它在Internet Explorer 9及以下版本中正常工作。它在IE 10上运行正常。我希望box-shadow只包装容器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; }

Internet Explorer - CSS box-shadow仅限容器div

1 个答案: