html - @-moz-document url-prefix () 未在 firefox 中呈现

Question

我已经为 firefox 指定了以下 CSS。

.bill-tab-button {
    width: 33.3%;
    height: 100%;
    float: left;
    border-left: 1px solid rgb(197, 196, 196);
    border-bottom: 1px solid rgb(197, 196, 196);
    box-sizing: border-box;
    font-family: MyriadProReg;
    cursor: pointer;
}

.bill-tab-fixed-width {
    width: 105px;
}

.bill-tab-button-selected {
    border-bottom: 2px solid red;
    box-sizing: border-box;
    color: #b83709;
    border-left: none;
}

.bill-tab-button span {
    padding: 3px;
    vertical-align: -3px;
}

/* Firefox Specific CSS Styling */

@-moz-document url-prefix (){
    .bill-tab-button { 
        width:33.2%;
        height: 90%;
        float: left;
        border-left: 1px solid rgb(197, 196, 196);
        border-bottom: 1px solid rgb(197, 196, 196);
        box-sizing: border-box;
        font-family: MyriadProReg;
    }

    .bill-tab-fixed-width {
        width: 104.0px;!important
    }

    .bill-tab-button-selected {
        border-bottom: 2px solid red;
        box-sizing: border-box;
        color: #b83709;
        border-left: none;
    }
}

当我在没有服务器( jetty )的情况下测试这些时，CSS 得到完美呈现!我将此 CSS 用于 spring web 应用程序，并使用 jetty 作为服务器。当我运行应用程序时，浏览器呈现默认 CSS 而不是 firefox 特定的 CSS。

是否有任何与 URL 前缀冲突的内容。请帮助我!

Answer 1

CSS 根本不应该呈现，因为 url-prefix 和 () 之间有一个不应该存在的空格。您需要删除它，或者至少将它移到 () 之外。我还看到放错地方的 !important 似乎可以安全地完全省略它，或者如果没有，它应该出现在 ; 之前:

@-moz-document url-prefix() {
    .bill-tab-button { 
        width:33.2%;
        height: 90%;
        float: left;
        border-left: 1px solid rgb(197, 196, 196);
        border-bottom: 1px solid rgb(197, 196, 196);
        box-sizing: border-box;
        font-family: MyriadProReg;
    }

    .bill-tab-fixed-width {
        width: 104.0px !important;
    }

    .bill-tab-button-selected {
        border-bottom: 2px solid red;
        box-sizing: border-box;
        color: #b83709;
        border-left: none;
    }
}

如果这仍然不能解决问题，则有其他问题。您需要根据评论中的要求提供更多信息。