Question

您好我正在尝试为i-e 10使用box-shadow但是对于其他浏览器i-e 10它无法正常工作它正常工作。这是我的行

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

有谁能告诉我我要为此添加什么？

Answer 1

这里的各种答案试图为您提供替代语法都是错误的。

IE10支持box-shadow就好了。你不应该做任何特殊的事情来使它发挥作用。

它可能无法正常工作的唯一原因是浏览器是使用Quirks模式还是兼容模式渲染页面。这些模式中的任何一种都将禁用该功能，因为它们旨在模拟没有它的旧版IE。

要检查您是否处于其中一种模式，请按F12以显示开发工具窗口。在IE10中，模式信息应显示在窗口的顶部。如果它显示“浏览器模式：IE10”和“文档模式：标准”以外的任何内容，那么您已找到问题的原因。

您可以按照以下方式解决此问题：

在<html>标记上方的代码顶部添加有效的文档类型，如下所示：
```
<!DOCTYPE html>
```
在HTML <head>元素中的某处添加X-UA兼容元标记，如下所示：
```
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```

这应该确保IE10以标准模式加载页面，这应该反过来解决box-shadow的问题。

希望有所帮助。

Answer 2

编辑：

正如@Spudley指出的那样，IE10支持box-shadow很好，但看起来像是parsing bug in IE9/10。 @ ssilas777指出的这个hack应该可以工作：

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
    span {
        box-shadow:0px 0px 2px 0px #333;
    }
}

如果你需要支持旧IE，你可以使用这个hack：

HTML：

<div class="shadow1">
    <span>
    Box-shadowed element
    </span>
</div>

CSS：

.shadow1 {
    background-color: rgb(68,68,68); /* Needed for IEs */
    -moz-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);
    box-shadow: 0px 0px 20px 0px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}
.shadow1 span {
    position: relative; /* This protects the inner element from being blurred */
    padding: 40px;
}

小提琴：

http://jsfiddle.net/LxY5t/

更多：

http://css-tricks.com/snippets/css/css-box-shadow/

Answer 3

尝试将@media blocks用于IE特定的css并增加IE 10的框阴影大小。

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   color:#333333; 
   text-decoration:none;
 }

/*For IE 10*/
@media screen and (min-width:0\0) {
span{
 box-shadow:0px 0px 5px 0px #333; 
}
}

请注意，我们已经增加了IE 10的包装盒大小。

选中此Moving IE specific CSS into @media blocks

Answer 4

span {
   background:#000; 
   -webkit-box-shadow:0px 0px 2px 0px #333; 
   box-shadow:0px 0px 2px 0px #333; 
   -ms-box-shadow:0px 0px 2px 0px #333;
   color:#333333; 
   text-decoration:none;
}

Answer 5

你的css工作正常，因为background颜色和box-shadow颜色相同所以它不可见。

此处更改了测试的背景颜色，

span {
   background:#FFF; 
   -webkit-box-shadow:0px 0px 10px 0px #333; 
   box-shadow:0px 0px 10px 0px #333; 
   color:#333333; 
   text-decoration:none;
}

盒子阴影在i-e 10中不起作用

5 个答案:

编辑：

HTML：

CSS：

小提琴：

更多：