Is it possible to use box-shadow in 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?

回答1:

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?

回答2:

You are trying to make an inset boxshadow in Internet Explorer 5.5 through 8.

This is completely possible.

Here is a code example with explanations:

(THIS WILL ONLY SHOW UP RIGHT IN INTERNET EXPLORER 5.5 - 8):

#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
  min-width: 100%;
  /* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
  height:100%;
  position: relative;
  /* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
  border: solid 1px black;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
  margin-bottom: -39px;
  margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
    position: relative;
    min-width: 100%;
    height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
    margin-top:-49px;
    margin-left:-45px;
    height:100%;
    min-width:100%;
    background-color: white;
    position: relative;
}
body {
    position: relative;
    height: 100%;
    min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow. Please excuse my ugly sentence, haha. */
    overflow-y: hidden;
    overflow-x: hidden;
}

<body>
    <div class="box-parent-fix">
        <div class="box-parent">
            <div id="box">
 
            </div>
        </div>
    </div>
</body>

Here is a screenshot of it working in Internet Explorer 6:

Here is a screenshot of it working in Internet Explorer 8: