在 SCSS 中使用 @-moz-document url-prefix() 来定位 Firefox

【问题标题】：Using @-moz-document url-prefix() to target Firefox in SCSS在 SCSS 中使用 @-moz-document url-prefix() 来定位 Firefox
【发布时间】：2013-09-08 12:31:28
【问题描述】：

有没有一种简单的方法可以使用“@-moz-document url-prefix()”来定位 SCSS 文档中的 Firefox。

我尝试了以下方法，但父引用“&”在这种情况下不起作用。

#nav li{
   display: table-cell;
   @-moz-document url-prefix(){
      & {
         display: inline-block;
      }
   }
}

【问题讨论】：

我很好奇你为什么需要这样做？ Firefox 的渲染引擎有什么不同，以至于您需要专门为 Firefox 更改元素的显示类型？
Firefox 在显示属性为 table-cell 的项目上使用相对位置时存在问题。我将这个组合用于下拉导航，它在除 Firefox 之外的所有浏览器中都能正常工作。将 display 属性更改为 inline-block 在 Firefox 和其他浏览器中有效，但不提供 table-cell 将提供的间距。
你现在运气不好。这可能是未来的可能性：github.com/nex3/sass/issues/286

标签： firefox sass

【解决方案1】：

我不时遇到类似的小问题。我主要使用这种技术来修复 IE8。这是我的解决方法：

首先我安装：https://github.com/rafaelp/css_browser_selector

这为我提供了每个浏览器的浏览器和渲染类：

<html class="gecko firefox firefox26 mac">

然后在我的 SCSS 中，我可以这样做：

.foo{ 显示：块； .firefox & { 展示;没有; } }

这个例子在 Firefox 中隐藏了 .foo。使用 & after 选择器向后查找树。 SASS 不是很棒吗？！？！？

或者，安装脚本并创建一个单独的 firefox.scss，然后像这样启动它：

.firefox {
  // Do stuff here
}

通常，使用诸如 Modernizr 之类的功能检测比使用特定浏览器更容易，但有时您需要解决各种浏览器问题。

【讨论】：