Firefox 特定的媒体查询

Question

这可能是一个非常简单的问题，但我很难过！我有一个外部 CSS 文件，它工作正常并且响应迅速。不出所料，在 Firefox 中查看时，一些元素的位置有点 "off"。我想为在 Firefox 中查看页面时编写一个媒体查询，并调整特定元素的边距等。我以为你可以使用前缀：

@-moz-document url-prefix()

作为媒体查询，但它没有做任何事情。

当在 Firefox 和 Safari 中查看页面时，如何编写媒体查询？

Answer 1

您可以使用您提到的选择器，例如：

@-moz-document url-prefix() {
  h1, p{
    color:pink;
  }
}  

现场观看：http://codepen.io/panchroma/pen/gpXdRj

有关 Firefox 供应商选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#font-family

更多浏览器选择器和技巧：http://browserhacks.com

FWIW，您是否仔细检查过您的 FireFox 布局问题是否与浏览器默认设置无关，并且无法通过使用不同的 CSS 重置来解决？我过去曾使用 normalize.css

取得过成功

祝你好运！

Answer 2

此查询仅影响 mozilla navigator:

@media all and (min--moz-device-pixel-ratio:0) and (max-width: 680px){...}

这仅适用于 IE：

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) and (max-width: 680px){...}

这里有更多信息：

https://developer.mozilla.org/es/docs/CSS/Media_queries

祝福！！