只为 Firefox 编写 CSS 规则

lio_zero

于 2021-11-07 13:22:54 发布

阅读量362

点赞数

文章标签： firefox css 前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46267040/article/details/125369675

版权

本文介绍了两种针对Firefox浏览器的CSS修复方法。一种是使用@-moz-document url-prefix()，另一种是利用@supports(-moz-appearance:none)。这些规则专门为Firefox定制，可以为h1标签添加蓝色字体，而其他浏览器会忽略这些样式。@-moz-document无URL参数时适用于所有页面，是Firefox特有的CSS hack。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果您想添加一些 CSS 规则来修复 Firefox 上的问题，那么这个技巧可能很有用。

有两种检测 Firefox 的方法：

@-moz-document url-prefix() {
  h1 {
    color: blue;
  }
}

/* 使用 `@support` */
@supports (-moz-appearance: none) {
  h1 {
    color: blue;
  }
}

上面的示例代码将为 Firefox 上的 h1 添加蓝色。

解释

任何以 CSS 开头的规则 @-moz- 都是 Gecko 引擎特定的规则，而不是标准规则。也就是说，它是 Mozilla 特定的扩展。

url-prefix 规则将包含的样式规则应用于 URL 以其开头的任何页面。不带 URL 参数使用时，@-moz-document url- prefix() 它适用于所有页面。实际上，这是仅用于 Gecko(Mozilla Firefox)的 CSS hack。所有其他浏览器将忽略样式。