是否可以在IE8中使用box-shadow？ [英] Is it possible to use box-shadow in IE8?

问题描述

为什么这个CSS在框架/环境/浏览器之间不一致地应用？

我有一个在Meteor中创建的原型，其中CSS在创建阴影效果和添加边框到各种图像，因为他们被翱翔;具体来说，在Meteor原型（它是一个Sharepoint应用程序，但测试功能这样的更快的Meteor）我有这个CSS：

  #imgPostTravelTop：hover，#imgPostTravelTopRight：hover，#imgPostTravelCenter：hover，#imgPostTravelBottom：hover {
 z-index：4; 
 -moz-box-shadow：0 0 7px＃000; 
 -webkit-box-shadow：0 0 7px＃000; 
 box-shadow：0 0 7px＃000; 
 
 border：1px solid gold; 
} 
  

它工作正常 - 在mouseenter /悬停到一个图像，

 
 
 $ b   .finaff-form-help-post-travel-centerimage：hover，
 .finaff-form-help-post-travel-bottomimage：hover {
 z-index：4; 
 -moz-box-shadow：inset 0 0 7px＃000; 
 -webkit-box-shadow：inset 0 0 7px＃000; 
 box-shadow：inset 0 0 7px＃000; 
 
 border：1px solid gold; 
} 
  

...仅适用于Chrome和Firefox / p>

我试过这个，据说它在IE8工作：

  #imgPostTravel ：hover {
 zoom：1; 
 filter：progid：DXImageTransform.Microsoft.DropShadow（OffX = 5，OffY = 5，Color =＃ff0000）; 
} 
  

...但它不工作阴影到IE8）。

有什么我可以做一个盒子阴影工作在IE8吗？

解决方案

您可以尝试@thirtydot回答：

使用 CSS3 PIE ，它可以模拟一些CSS3属性旧版本的IE。

它支持 box-shadow （除了插入关键字）。

编辑：

或者您可以尝试@Marcus Pope回答：

  filter：
 progid：DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 0，strength = 5），
 progid：DXImageTransform.Microsoft。阴影（颜色=＃aaaaaa，direction = 45，strength = 2），
 progid：DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 90，strength = 5），
 progid：DXImageTransform。 Microsoft.Shadow（color =＃aaaaaa，direction = 135，strength = 5），
 progid：DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 180，strength = 10），
 progid： DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 225，strength = 5），
 progid：DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 270，strength = 5），
 progid：DXImageTransform.Microsoft.Shadow（color =＃aaaaaa，direction = 315，strength = 2）; 
  

可能重复的

在IE7和IE8中的框阴影

CSS3 Box Shadow效果为IE8？

Why is this CSS being applied inconsistently across frameworks/environments/browsers?

I've got a prototype created in Meteor where the CSS works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

It works fine - on mouseenter / hovering into an image, it grows a golden five O'Clock shadow.

However, virtually the same thing in the Sharepoint code:

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid gold;
}

...only works in Chrome and Firefox (not in IE8).

I tried this, which supposedly works in IE8:

#imgPostTravel:hover {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

...but it doesn't work (does not add a box-shadow to IE8).

Is there anything I can to do get a box-shadow to work in IE8?

解决方案

You can try @thirtydot answer:

Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.

It supports box-shadow (except for the inset keyword).

EDIT:

or you can try @Marcus Pope answer :

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2); 

Possible duplicate of
Box shadow in IE7 and IE8
CSS3 Box Shadow Effect for IE8?

这篇关于是否可以在IE8中使用box-shadow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！