2

我为 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;
    }
}

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

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

4

1 回答 1

2

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

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

于 2013-04-22T15:36:18.210 回答