Question

我试图通过使用下面的css和html代码在弹出窗口的底部应用空间，因为我只在mozilla浏览器中遇到问题，在弹出窗口的末尾没有足够的空间。下面是我的代码我曾经用过，但是我需要减少chrome浏览器中的更多空间，并且需要为mozilla浏览器添加少量空间。我该怎么办？

<style type="text/css">
       @@-moz-document url-prefix() {
        .bottom {
            position: relative;
            width: 100%;
            height: auto;
            bottom: 0;
            flex: 1; /*Added*/
            background: white;
        }
    }
</style>
<div class=bottom>
   <table>
      <tr><td>&nbsp;</td></tr>
   </table>
</div>

<div id="maindiv" style="max-height: 450px; overflow-y: auto; width: 98%; padding:15px 10px 55px;">
//pop up logic in main div getting space at the end of ui in chrome but not in fire fox
</div>

我需要减少chrome浏览器中的更多空间，并且需要为Mozilla浏览器添加少量空间。我该怎么办？

Answer 1

您必须使用一个@符号。

@-moz-document url-prefix() {
    .bottom {
        position: relative;
        width: 100%;
        height: auto;
        bottom: 0;
        flex: 1; /*Added*/
        background: white;
    }
}

这是针对Chrome浏览器的：

@media screen and (-webkit-min-device-pixel-ratio:0){ 
    .bottom {
        position: relative;
        width: 100%;
        height: auto;
        bottom: 0;
        flex: 1; /*Added*/
        background: white;
    } 
}

Answer 2

使用符号 @ 代替两次 @@

<style type="text/css">
       @-moz-document url-prefix() {
        .bottom {
            position: relative;
            width: 100%;
            height: auto;
            bottom: 0;
            flex: 1; /*Added*/
            background: white;
        }
    }
</style>

Answer 3

您可以将@supports与calc(0s)表达式结合使用 @-moz-document测试Stylo — Gecko不支持时间值在calc()表达式中，但Stylo会这样做：

<style type="text/css">
@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        .bottom {
            position: relative;
            width: 100%;
            height: auto;
            bottom: 0;
            flex: 1; /*Added*/
            background: white;
        }
    }
}
</style>

应用的CSS适用于chrome和mozilla，应仅应用于mozilla

3 个答案: