box-shadow CSS 没有在 Firefox 中执行答案

【问题标题】：box-shadow CSS not being executed in Firefoxbox-shadow CSS 没有在 Firefox 中执行
【发布时间】：2015-02-21 04:49:41
【问题描述】：

以下 CSS 适用于 Chrome，但不适用于 Firefox。它将padding 添加到带有background-color 的包装文本中：

HTML：

<span id="titleheader">EVERYONE ACHES TO MAKE A DIFFERENCE</span>

CSS：

#titleheader {
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38);
    line-height: 140% !important;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;
}

但是 Firefox 并没有执行这部分：

box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;

@-moz-document url-prefix() {
    #titleheader {
        background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38);
        line-height: 140% !important;
        padding-left: 0px;
        padding-right: 0px;
        box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;
    }
}

我的网站：http://dev.presencingtheactivefeminine.com/

【问题讨论】：

我看不出在 Firefox 最新版或 Chrome 最新版中加载您的网站有什么不同。您能否添加详细信息或 JSFiddle 来演示一个确切的问题？（这段代码在哪里？
它会像您设置的那样完全显示出来。它在#titleHeader 的两侧显示一个红色框。如果您想更好地看到它，请更改其颜色，使其与背景不完全匹配，例如box-shadow: 10px 0 0 rgba(255, 255, 0, 0.38), -10px 0 0 rgba(255, 255, 0, 0.38) !important;。因为颜色和背景完全一样，所以你看不到它。
不，不是，如果您重新调整窗口大小以使标题换行，那么在扭曲的背景颜色上应该有一个left & right padding，它存在于all浏览器butFF
@Tim 好的，你不能漏掉这样的细节。为了看到这个，我需要将浏览器调整到什么分辨率？即使调整大小后，我也看不出您的跨度有任何差异。

标签： css firefox

【解决方案1】：

这在 FireFox 中修复了它

如@TylerH所说，您不需要

-moz-box-shadow: 10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;

但你确实需要添加

box-decoration-break: clone;

#titleheader {
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.38);
    box-decoration-break: clone;
    -webkit-box-shadow:  10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important; 
    box-shadow:  10px 0 0 rgba(255, 0, 0, 0.38), -10px 0 0 rgba(255, 0, 0, 0.38) !important;
}

【讨论】：