Internet Explorer 10 box-shadow size

问题:

Normally I don't bother the small differences in the rendering of box-shadows in different browsers, but in this case the box-shadow size is kind of important. IE9 and IE10 render a smaller box-shadow. Explorer 9 can be fixed with a little larger box shadow using conditional comments, but IE10 appears to have eliminated support for conditional comments. Is there a way of correcting the IE10 box-shadow size and make it a little larger like safari, chrome, firefox?

I know it's a little similar to this question but maybe someone have a trick for box-shadows size that works in IE9/10 or IE10 only.

For the record - this is a responsive site, and the box-shadow in question is applied to a li element with percentage width (for navigation)

回答1:

I found a solution. There are several ie10 hacks out there, but this one is CSS only and targets both IE9 and IE10. It is called the @media Zero Hack. You can find this one and other ie10 hacks at http://www.impressivewebs.com/ie10-css-hacks/

.navigation ul li a {
  -moz-box-shadow: 2px 2px 7px #2d231c;
  -webkit-box-shadow: 2px 2px 7px #2d231c;
  -o-box-shadow: 2px 2px 7px #2d231c;
  box-shadow: 2px 2px 7px #2d231c;
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
.navigation ul li a {
  box-shadow: 2px 2px 15px #3a312a;
 }
}

It uses a parsing bug in IE9/10. If this bug is fixed in IE11 this will also be future proof. I don't know how IE11 will handle box-shadow. More on moving IE specific CSS into @media blocks