Question

我看了所有相关主题但找不到解决方案，所以我创建了这个问题。我试图在IE8上实现box-shadow而它无法工作..它适用于IE9 +？

我有简单的div：

<span id="controls" class="box-shadow"> 
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/> 
<input id="end" type="hidden" value="Text" /> 
</span>

和CSS：

#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;

}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}

Answer 1

IE8或更低版本不支持CSS3 box-shadow。我个人不会担心IE8的支持，但如果你需要，那么MS有一个{IE}自IE5.5以来一直存在DropShadow。

Box Shadow Support

Drop Shadow

Answer 2

Box-shadow在IE8中不能原生工作，但你可以使用polyfill for CSS3。

以下是一个工作示例：http://css3pie.com/

您需要将polyfill应用于您的元素，如此

.box-shadow {
     box-shadow: 0px 0px 15px 0px #232361;
     -moz-box-shadow: 0px 0px 15px 0px #232361;
     -webkit-box-shadow: 0px 0px 15px 0px #232361;
    behavior: url(PIE.htc);
}

Answer 3

如果您不想使用任何第三方插件，可以参考以下网站：

http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

box-shadow IE8无法在IE8上运行

3 个答案: