2

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

我知道这与这个问题有点相似，但也许有人对仅在 IE9/10 或 IE10 中有效的 box-shadows 大小有一个技巧。

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

4

1 回答 1

2

我找到了解决方案。那里有几个 ie10 hack，但这个是CSS only针对IE9和IE10. 它被称为@media Zero Hack. 您可以在http://www.impressivewebs.com/ie10-css-hacks/找到这个和其他 ie10 hack

.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 移动到 @media 块中

于 2013-02-22T12:13:39.950 回答