Firefox中的CSS框阴影怪异

Question

当使用box-shadow将填充应用于跨度的左侧和右侧时，我有一个奇怪的问题，该跨度的内容包装在容器内：

box-shadow:9px 0px 0px red, -9px 0px 0px red;

它仅将左阴影应用于第一行，右阴影仅应用于最后一行。

http://jsfiddle.net/3zeL5ux8/2/是一个在Chrome和各种IE版本中按预期工作的测试用例（请参阅http://imgur.com/XhX1kco以获得完美渲染），为什么Firefox会搞砸它？

Answer 1

你可以尝试：

-moz-box-shadow:9px 0px 0px red, -9px 0px 0px red;

让我知道输出。现在无法调试。

干杯

Answer 2

您必须为所有浏览器使用所有不同的box shadow属性，请尝试以下代码： -

-moz-box-shadow: 9px 0px 0px red, -9px 0px 0px red; 
-webkit-box-shadow: 9px 0px 0px red, -9px 0px 0px red; 
box-shadow: 9px 0px 0px red, -9px 0px 0px red;

Answer 3

答案是一个名为box-decoration-break: clone;的属性。这使得Firefox和Chrome的速度提升......