Question

我为一个元素编写了一个盒子阴影，它在Chrome中工作正常，但在Firefox和Internet Explorer中不起作用。我的网站有三个div（标题，正文，页脚），它们适用于Chrome和Firefox，另外2个罚款。

这是我的代码：

#footer {
background-image:url(../../images/footer-extend.png);
background-repeat: repeat-x;
width: 960px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
overflow:hidden;
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;

margin:0 auto;
margin-top: -10px;
margin-bottom: 100px;
/* BOX SHADOW */

-moz-box-shadow: 6px 0 6px  -4px #222, -6px 0 6px  -4px #222, 0px 6px -4px #222;  
-webkit-box-shadow: 6px 0 6px  -4px #222, -6px 0 6px  -4px #222, 0px 6px -4px #222;
box-shadow: 6px 0 6px  -4px #222 , -6px 0 6px  -4px #222, 0px 6px -4px #222; 
}

Answer 1

您的box-shadow在上一个声明中使用blur的负值。您是否可能遗漏某些东西，并希望将负面模糊视为传播？

我猜Firefox不支持负面模糊，这似乎是合法的，因为这没有任何意义。

试试这个（记得将它也应用到前缀版本）：

box-shadow: 6px 0 6px -4px #222, -6px 0 6px -4px #222, 0 6px 0 -4px #222;

Answer 2

试试这个，这适用于Firefox和Ie9

-moz-box-shadow:10px 10px 5px #000000;
-webkit-box-shadow:10px 10px 5px #000000;
box-shadow:10px 10px 5px #000000;

Box Shadow在Chrome中运行，但在IE和Firefox中没有

2 个答案: