通常我不会担心不同浏览器中盒子阴影渲染的微小差异,但在这种情况下,盒子阴影大小很重要。 IE9 和 IE10 渲染 smaller box-shadow 。 Explorer 9 可以使用条件注释修复稍大一点的框阴影,但 IE10 似乎已经取消了对条件注释的支持。有没有办法纠正 IE10 box-shadow 大小并使其像 safari、chrome、firefox 一样大一点?
我知道它有点类似于 this question但也许有人有一个仅适用于 IE9/10 或 IE10 的盒子阴影大小技巧。
郑重声明 - 这是一个响应式网站,相关的 box-shadow 应用于具有百分比宽度的 li 元素(用于导航)
最佳答案
我找到了解决方案。有几种 ie10 hacks,但这个是 CSS
,并且针对 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
中得到修复,这也将成为 future 的证明。我不知道 IE11
将如何处理 box-shadow
。
更多关于moving IE specific CSS into @media blocks
关于internet-explorer-9 - Internet Explorer 10 框阴影大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13242826/