更新

Question

我在IE10中使用box-shadow时遇到了问题我试图添加

@media screen and (min-width:0\0)

但规则却没有成功。这些代码适用于 firefox 和 chrome 。

码

.glossy-curved-black .slide-wrapper {
    background-color: #FFF;
    border: 10px solid #FFF;
    box-shadow: 40px 40px 40px #000;
   -webkit-box-shadow: 40px 40px 40px #000;
   -moz-box-shadow: 40px 40px 40px #000;  
}

    @media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
      .glossy-curved-black .slide-wrapper {
         box-shadow: 0px 0px 80px #000;
       }
    }

我的网站here

Answer 1

问题在于你的头脑：

<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

如果您希望IE使用IE=EDGE代替现代浏览器，那么您将强制页面进入IE7模式。我测试了强制最新的渲染模式，阴影出现了。

更新

根据Microsoft的建议，只需使用HTML5文档类型并避免发送文档兼容模式。浏览器检测已弃用，一般应避免使用。请改用特征检测。默认模式是标准模式，始终为EDGE *。

<!doctype html>

* web-browser control除外，在这种情况下，文档模式必须通过EDGE标头或注册表明确设置为X-UA-Compatible。

Answer 2

没有供应商前缀的主要CSS声明应始终为最后一个。试试这个：

.glossy-curved-black .slide-wrapper {
    background-color: #FFF;
    border: 10px solid #FFF;
   -webkit-box-shadow: 40px 40px 40px #000;
   -moz-box-shadow: 40px 40px 40px #000;
   -ms-box-shadow: 40px 40px 40px #000;
   box-shadow: 40px 40px 40px #000;  
}

@media screen and (min-width: 500px) {
/* IE9 and IE10 rule sets go here */
  .glossy-curved-black .slide-wrapper {
      -webkit-box-shadow: 0px 0px 80px #000;
      -moz-box-shadow: 0px 0px 80px #000;
      -ms-box-shadow: 0px 0px 80px #000;
      box-shadow: 0px 0px 80px #000;
   }
}

我还注意到你的媒体查询中有一个奇怪的最小宽度值。我已将此设置为500px作为您的示例。

Box-Shadow在IE 10中不起作用

2 个答案:

更新