如何在SCSS中定位firefox或任何其他浏览器？

Question

glyphicon未对齐，在Firefox中表现不正常，但在Chrome和Safari中看起来很完美。为了解决这个问题，我试图编写一个规则，只要它是Mozilla的浏览器就适用。

有没有办法通过使用像@if这样的指令来检测SCSS中的浏览器。如下所示：

@if $browser === mozilla {
    //apply this CSS
   .pull-right.glyphicon.glyphicon-chevron-right {
    top: -13px;
    line-height: 0.5 !important;
}

我们有任何简单的方法可以检测吗？我尝试使用不在SCSS中工作的@moz-document url-prefix()。

提出了类似的问题here，但问题没有正确解决方案。

非常感谢任何帮助或指导。谢谢。

Answer 1

在使用前缀规则进行混合时设法使scss进行编译，但没有其他用途：

@mixin firefox-only {
  @at-root {
    @-moz-document url-prefix() {
      & {
        @content;
      }
    }
  }
}

然后

@include firefox-only {
  prop: val;
}

Answer 2

我使用以下内容解决了我在 Firefox 上将文本缩进应用于双倍宽度的问题。

select {
 text-indent: calc(50% - 16px);

 @supports (-moz-appearance:none) {
  text-indent: calc(25% - 8px);
 }
}