1

嗨，我正在尝试使用 box-shadow ，i-e 10但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;
}

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

4

5 回答 5

4

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

IE10支持box-shadow就好了。你不需要做任何特别的事情来让它工作。

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

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

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

  1. 将有效的文档类型添加到代码顶部的<html>标记上方，如下所示：

    <!DOCTYPE html>

  2. 在 HTML 元素中的某处添加 X-UA-Compatible 元标记<head>，如下所示：

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

这应该确保 IE10 以标准模式加载页面，从而解决box-shadow.

希望有帮助。

于 2013-11-13T12:18:14.327 回答
1

编辑：

正如@Spudley 指出的那样，IE10 支持 box-shadow 就好了，但似乎正在解析 IE9/10 中的错误。@ssilas777 指出的这个技巧应该可以工作：

@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/

于 2013-11-13T12:09:39.707 回答
0

尝试使用@media blocksIE 特定的 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 的 box -shadow 大小。

检查此将 IE 特定的 CSS 移动到 @media 块中

于 2013-11-13T11:51:43.417 回答
0 
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;
}
于 2013-11-13T12:08:56.187 回答
0

您的 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;
}
于 2013-11-13T12:13:48.207 回答