Internet Explorer 10的框阴影大小 [英] Internet Explorer 10 box-shadow size

问题描述

通常我不打扰在不同浏览器中渲染box-shadows的小差异，但在这种情况下，box-shadow的大小是很重要的。 IE9和IE10会呈现较小的框阴影。资源管理器9可以用一个更大的框阴影使用条件注释固定，但IE10似乎已经取消了对条件注释的支持。有没有办法纠正IE10的box-shadow的大小，并使它有点大，像safari，chrome，firefox？

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?

我知道它有点类似于这个问题，但也许有人有一个戏法盒阴影大小只有在IE9 / 10或IE10工作。

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.

对于记录 - 这是一个响应的网站，所讨论的box-shadow应用于li元素百分比width（for navigation）

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)

推荐答案

我找到了一个解决方案。有几个ie10 hacks在那里，但这一个仅CSS 并且目标 IE9 和 IE10 。它被称为 @media Zero Hack 。您可以在 http://www.impressivewebs.com/ie10- css-hacks /

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;
 }
}

它使用 IE9 / 10 。如果这个错误在 IE11 中修复，这也将是未来的证明。我不知道 IE11 如何处理 box-shadow 。
有关详细信息，请将IE特定的CSS移动到@媒体块

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

这篇关于Internet Explorer 10的框阴影大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！