在IE 9中看起来很糟糕的阴影

Question

在互联网上查看如何为我的容器添加阴影我发现这个代码适用于我的div

.boxShadow {
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
}

现在，这段代码使得我的div在chrome和Firefox

中看起来很棒

但出于某种原因，这就是IE 9中的样子

我知道Chrome和FF对IE的风格不同但是我想知道为什么我的风格也在为角色添加阴影，有没有办法解决这个问题？谢谢你的帮助

Answer 1

用以下内容替换您的规则：

.boxShadow {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

要支持IE 6,7和8，请添加包含此规则的conditional CSS：

.boxShadow {
  behavior: url(ie-css3.htc);
}

从http://box-shadow.googlecode.com/files/ie-css3.htc下载ie-css3.htc。