css - 媒体查询高度在 Mozilla 中不起作用

Question

我已经根据屏幕的高度设置了一个媒体查询，但是该代码在 firefox 中似乎不起作用。

我试过了，还是不行:

@-moz-document url-prefix() {
  @media screen and ( min-height: 1024px){
    .sticky .order .item-list {
        max-height: 50vh !important;
    }
  }
}

**更新 我单独使用了 @media 并且它起作用了，但是当我刷新页面时，问题再次出现并且媒体查询高度不再起作用。

@media screen and ( min-height: 1024px){
        .sticky .order .item-list {
            max-height: 50vh !important;
        }
      }

Answer 1

Firefox 中的 @-moz-document at 规则隐藏在 about:config 首选项后面，您必须先启用它。

警告它被隐藏是有原因的。显然这很容易受到攻击。或者用MDN的话来说:

This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (bug 1035091).

因此，请自行承担风险!

---

更改 about:config 设置

1. 在地址栏中输入about:config
2. 如果这是您第一次这样做，将会出现一条消息，警告您存在危险。单击“我会小心”或“我接受风险”按钮(按钮上的文本因 Mozilla 版本而异)。
3. 在列表中搜索条目(列表按字母顺序排序)，或者在“搜索”框中键入条目的名称。在这种情况下，您只需粘贴 layout.css.moz-document.content.enabled，然后结果将仅是此条目。
4. 该值设置为 false。双击该行将其设置为 true，您就完成了。没有“保存”或“应用”按钮。不过，您可能需要在网页上按 F5。

如果您以前从未使用过 about:config，您可以在这里阅读更多相关信息:
Configuration Editor for Firefox