0

我在尝试添加框阴影在 IE10 中工作时遇到问题

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

我的网站在这里

4

2 回答 2

5

问题出在你的 head 元素中：

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

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

更新

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

<!doctype html>

* Web 浏览器控件除外，在这种情况下，文档模式必须明确设置EDGE为通过X-UA-Compatible标题或通过注册表。

于 2013-10-02T15:12:15.090 回答
1

没有供应商前缀的主要 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;
   }
}

我还注意到您的媒体查询中有一个奇怪的 min-width 值。我已将其设置为 500px 作为示例。

于 2013-10-02T15:06:43.310 回答