html - 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

答案是一个名为 的属性box-decoration-break: clone;。这使 Firefox 与 IE 和 Chrome 同步...

Answer 2

你可以试试：

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

让我知道输出。目前无法调试。

干杯

Answer 3

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

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