Box-shadow is not working in i-e 10

Question

Hi I am trying to use box-shadow for i-e 10 but it is not working correctly in for i-e 10 for other browsers it is working fine. here is my line

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

Can anyone tell me what I have to add for this ??

Can you provide a JSFiddle example that demonstrates your code not working? I've tried it myself and it seems to work fine for me. Maybe you've got the browser in quirks mode or compatibility mode? — Spudley, Nov 13 '13 at 12:13

score 4 · Answer 1 · answered Nov 13 '13 at 12:18

The various answers here trying to suggest alternative syntax for you are all wrong.

IE10 supports box-shadow just fine. You shouldn't need to do anything special to get it working.

The only reason it might not be working is if the browser is rendering the page using Quirks mode or Compatibility mode. Either of these modes will disable the feature, because they're designed to emulate older versions of IE which did not have it.

To check if you're in one of these modes, press F12 to bring up the Dev tools window. In IE10, the mode information should be displayed at the top of the window. If it says anything other than "Browser Mode: IE10" and "Document Mode: Standards", then you've found the cause of the problem.

You can fix this as follows:

Add a valid doctype to the top of your code, above the <html> tag as follows:
```
<!DOCTYPE html>
```
Add the X-UA-Compatible meta tag somewhere inside your HTML <head> element, as follows:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```

This should make sure IE10 loads the page in standards mode, which should in turn sort out the problems with the box-shadow.

Hope that helps.

made the box shadow show that eluding me in IE11, thanks! – Brett Aug 19 '15 at 13:27 — Brett, Aug 19 '15 at 13:27

score 1 · Answer 2 · edited May 23 '17 at 11:59

EDIT:

As @Spudley pointed, IE10 supports box-shadow just fine, but seems like is parsing bug in IE9/10. This hack pointed out by @ssilas777 should work:

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
    span {
        box-shadow:0px 0px 2px 0px #333;
    }
}

In case you need support for old IE you can use this hack:

HTML:

<div class="shadow1">
    <span>
    Box-shadowed element
    </span>
</div>

CSS:

.shadow1 {
    background-color: rgb(68,68,68); /* Needed for IEs */
    -moz-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}
.shadow1 span {
    position: relative; /* This protects the inner element from being blurred */
    padding: 40px;
}

Fiddle:

http://jsfiddle.net/LxY5t/

More:

http://css-tricks.com/snippets/css/css-box-shadow/

The tips you've given are great, but are only relevant for IE8 and earlier. The OP is asking about IE10. — Spudley, Nov 13 '13 at 12:18
@Spudley: yeap, you are right, I found this: http://stackoverflow.com/a/15024009/670377, will update my answer ;) — Tom Sarduy, Nov 13 '13 at 12:24

ssilas777 · Answer 3 · 2013-11-13T12:09:46.860

0

Try using @media blocks for IE specific css and increase the box - shadow size for IE 10.

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
 }

/*For IE 10*/
@media screen and (min-width:0\0) {
span{
 box-shadow:0px 0px 5px 0px #333; 
}
}

Please note that we have increased the box -shadow size for IE 10.

Check this Moving IE specific CSS into @media blocks

edited Nov 13 '13 at 12:09

answered Nov 13 '13 at 11:51

ssilas777

9,166
3
41
63

2

Why would adding a media directive help? Is there a known IE bug that this relates to? What are the specifics of that bug? Is there any documentation you could link to? – Quentin Nov 13 '13 at 11:56
@Quentin Check the link – ssilas777 Nov 13 '13 at 11:58
I think the point that Quintin is making is that IE10 supports `box-shadow` just fine, and shouldn't need any special hacks around it to make it work. – Spudley Nov 13 '13 at 12:19
@ssilas777: I see your point: http://stackoverflow.com/questions/13242826/internet-explorer-10-box-shadow-size – Tom Sarduy Nov 13 '13 at 12:31
1

@TomSarduy also this :) http://stackoverflow.com/questions/9900311/how-do-i-target-only-internet-explorer-10-for-certain-situations-like-internet-e – ssilas777 Nov 13 '13 at 13:31

score 0 · Answer 4 · answered Nov 13 '13 at 12:08

0

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   -ms-box-shadow:0px 0px 2px 0px #333;
   color:#333333; 
   text-decoration:none;
}

answered Nov 13 '13 at 12:08

Bipin Kumar Pal

859
1
5
12

Firstly, when using prefixes, *always* put the un-prefixed version last. Secondly, when last did you use a browser that required the `-khtml-` prefix for `box-shadow`?? Thirdly, the `-ms-` prefix is not required; IE never used a prefix for this feature. – Spudley Nov 13 '13 at 12:10

score 0 · Answer 5 · answered Nov 13 '13 at 12:13

0

Your css working fine, Since background color and box-shadow color are same so it is not visible.

Here changed the background color for testing,

span {
   background:#FFF; 
   -webkit-box-shadow:0px 0px 10px 0px #333; 
   box-shadow:0px 0px 10px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

answered Nov 13 '13 at 12:13

Krish R

21,556
6
47
57

it's true that the colours he's given make it very hard to see, but if that was the issue, why is he saying it's only a problem in IE? Surely all browsers would be affected? (in fact they are; I could barely make out his shadow when I tested it in Firefox and Chrome) – Spudley Nov 13 '13 at 12:21