在前端开发中，不同浏览器的内核差异会导致CSS样式渲染出现不一致的情况，部分场景下我们需要单独为Firefox浏览器设置专属样式，来修复兼容问题或者实现特定效果。
方法一：使用-moz-前缀
Firefox内核是Gecko，很多专属属性会带有-moz-前缀，只有Firefox会识别这些前缀属性，其他浏览器会自动忽略。我们可以利用这个特性来设置仅Firefox生效的样式。
比如需要设置Firefox下滚动条的宽度和颜色，就可以使用-moz-前缀的相关属性：
/* 仅Firefox生效的滚动条样式 */
* {
scrollbar-width: thin; /* Firefox专属属性，设置滚动条宽度 */
scrollbar-color: #409eff #f0f0f0; /* 滚动条滑块颜色和轨道颜色 */
}
这种方法的局限性是只能使用Firefox支持的带-moz-前缀的属性，无法覆盖所有样式场景。
方法二：使用@supports规则检测属性支持
@supports可以检测浏览器是否支持某个CSS属性，我们可以检测Firefox专属的属性，在支持的情况下写对应样式，其他浏览器不支持该属性就不会执行内部样式。
示例代码如下：
/* 检测浏览器是否支持-moz-appearance属性，Firefox支持该属性 */
@supports (-moz-appearance: none) {
.firefox-only {
background-color: #f5f7fa;
padding: 16px;
border-radius: 4px;
}
}
这种方法的兼容性较好，只要浏览器支持@supports规则就可以使用，不过需要确保检测的专属属性确实是Firefox独有的。
方法三：使用JavaScript判断浏览器后添加类名
如果CSS方案无法满足需求，可以结合JavaScript判断浏览器是否为Firefox，然后给根元素添加专属类名，再通过类名写对应样式。
JavaScript判断代码如下：
// 判断是否为Firefox浏览器
const isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
document.documentElement.classList.add('is-firefox');
}
对应的CSS样式如下：
/* 仅Firefox生效的样式 */
.is-firefox .target-element {
font-family: "宋体", sans-serif;
line-height: 1.8;
}
方法对比与注意事项
三种方法的适用场景和优缺点如下：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| -moz-前缀 | 纯CSS实现，无额外逻辑 | 仅支持Firefox专属属性 | 需要设置Firefox专属属性值的场景 |
| @supports规则 | 纯CSS实现，可覆盖更多样式 | 需要确认检测的属性为Firefox独有 | 需要设置通用CSS属性的场景 |
| JS判断添加类名 | 适配所有样式场景，灵活度高 | 需要依赖JavaScript执行 | 复杂样式适配，前两种方法无法满足的场景 |
需要注意，浏览器版本更新可能会导致专属属性变化，使用前建议先测试目标Firefox版本的兼容性，避免使用已经废弃的属性。