Internet Explorer 10 框阴影大小

【问题标题】：Internet Explorer 10 box-shadow sizeInternet Explorer 10 框阴影大小
【发布时间】：2012-10-25 22:07:00
【问题描述】：

通常我不会在乎不同浏览器中 box-shadow 渲染的微小差异，但在这种情况下，box-shadow 的大小很重要。 IE9 和 IE10 呈现 smaller box-shadow。 Explorer 9 可以使用条件 cmets 修复稍大的盒子阴影，但 IE10 似乎已经取消了对条件 cmets 的支持。有没有办法纠正 IE10 的 box-shadow 大小，让它像 safari、chrome、firefox 一样大一点？

我知道它与this question 有点相似，但也许有人有一个仅适用于 IE9/10 或 IE10 的 box-shadows 大小的技巧。

作为记录 - 这是一个响应式网站，并且有问题的 box-shadow 应用于具有百分比宽度的 li 元素（用于导航）

【问题讨论】：

标签： internet-explorer-9 size conditional css internet-explorer-10

【解决方案1】：

我找到了解决方案。那里有几个 ie10 hack，但这个是 CSS only 并且针对 IE9 和 IE10。它被称为@media Zero Hack。你可以在http://www.impressivewebs.com/ie10-css-hacks/找到这个和其他ie10 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。更多关于moving IE specific CSS into @media blocks

【讨论】：