仅在Firefox中应用CSS规则

Question

如何使 margin-top: -5%; 仅在Firefox中生效？

在这段代码中：

#snap {
    width: 100%;
    overflow: hidden;
    margin-top: -5%; // only apply in Firefox
}

- Okram92

---

你的意思是margin-top只适用于其他浏览器，而不适用于Firefox吗？ - Ivo Coumans

是的，请仅返回翻译文本，不要只显示FF :) - Okram92

请问为什么您不希望在Firefox中显示这个？ - rwacarter

使用 http://necolas.github.io/normalize.css/ 怎么样？ 它应该会解决浏览器兼容性问题。 - Francesco

你说得对，我原本想避免使用，但我觉得我还是会用Bootstrap写代码。 - Okram92

Answer 1

您可以使用@supports来进行hack。

使用@supports允许进行本地特性检测，类似于Modernizr。

在下面的代码中，如果浏览器支持-moz-transform: translate(0, 0)，则div将应用margin-top: -50px。

div {
  width: 100px;
  height: 100px;
  background: red;
}

@supports (-moz-transform: translate(0, 0)) {
  div {
    margin-top: -50px;
  }
}

<div></div>

- Weafs.py

Answer 2

也许这个可以起作用。这是一个Firefox的hack，多年前曾经有效。我没有在最新的Firefox上测试过它。

  @-moz-document url-prefix() { 
      #snap {
         margin-top: -5%;
            }
  }

来源：http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

这是一篇关于针对Firefox浏览器的CSS技巧的文章。在编写CSS时，有些属性可能会在不同的浏览器中表现不同，因此需要使用一些hack来解决这个问题。本文介绍了一些专门针对Firefox浏览器的hack，可以帮助您更好地控制页面的外观和行为。

- Preben