Question

以下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/

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

box-shadow CSS未在Firefox中执行

1 个答案: