Box-Shadow Not Working in IE 10

Question

I am having problems getting box-shadow to work in IE10 I have tried to add

@media screen and (min-width:0\0)

rule but with no success. The codes works well in firefox and chrome.

code

.glossy-curved-black .slide-wrapper {
    background-color: #FFF;
    border: 10px solid #FFF;
    box-shadow: 40px 40px 40px #000;
   -webkit-box-shadow: 40px 40px 40px #000;
   -moz-box-shadow: 40px 40px 40px #000;  
}

    @media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
      .glossy-curved-black .slide-wrapper {
         box-shadow: 0px 0px 80px #000;
       }
    }

my website here

is there a reason you're trying to use different CSS for IE9 and 10? At this point you should treat all browsers the same. — Mgetz, Oct 02 '13 at 15:07

score 5 · Accepted Answer · edited May 23 '17 at 10:24

The problem is in your head element:

<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

You're forcing the page into IE7 mode, if you want IE to act like a modern browser use IE=EDGE instead. I tested forcing the latest rendering mode and the shadow shows up.

Update

Per recommendation by Microsoft, just use an HTML5 doctype and avoid sending a document compatibility mode. Browser detection is deprecated and should be avoided in general. Use feature detection instead. The default mode is an in standards mode always has been EDGE*.

<!doctype html>

*Except in the web-browser control, in which case the document mode must be set explicitly to EDGE either via the X-UA-Compatible header or via the registry.

score 1 · Answer 2 · answered Oct 02 '13 at 15:06

The main CSS declaration without the vendor prefix should always be last. Try this instead:

.glossy-curved-black .slide-wrapper {
    background-color: #FFF;
    border: 10px solid #FFF;
   -webkit-box-shadow: 40px 40px 40px #000;
   -moz-box-shadow: 40px 40px 40px #000;
   -ms-box-shadow: 40px 40px 40px #000;
   box-shadow: 40px 40px 40px #000;  
}

@media screen and (min-width: 500px) {
/* IE9 and IE10 rule sets go here */
  .glossy-curved-black .slide-wrapper {
      -webkit-box-shadow: 0px 0px 80px #000;
      -moz-box-shadow: 0px 0px 80px #000;
      -ms-box-shadow: 0px 0px 80px #000;
      box-shadow: 0px 0px 80px #000;
   }
}

I also noticed you had a weird min-width value in your media query. I have set this to 500px as an example for you.

The odd min-width media query is a hack for targeting IE 9&10: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/ — cimmanon, Oct 02 '13 at 15:38

Box-Shadow Not Working in IE 10

2 Answers2

Update