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作为一个弹簧网络应用程序，我使用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;
    }
}

如果这仍然无法解决问题，那么其他问题就出错了。您需要根据评论中提出的内容提供更多信息。

@ -moz-document url-prefix（）没有在firefox中呈现

1 个答案: