如何为不同浏览器设置不同top值？Firefox样式适配求助

当然可以实现！你遇到的Firefox和其他浏览器布局不一致的问题，属于很常见的浏览器兼容性差异，下面给你几个实用的解决办法：

方法1：用浏览器专属CSS规则精准控制 #

给Firefox单独设置样式 #

Firefox支持@-moz-document url-prefix()这个专属规则，能让里面的样式只在Firefox中生效，完全不用你试过的无效-moz-top写法，示例代码如下：

/* 通用样式：Chrome、Safari、Opera等浏览器生效 */
.your-target-class {
  top: 17px;
}

/* 仅Firefox生效的样式，会覆盖通用规则的top值 */
@-moz-document url-prefix() {
  .your-target-class {
    top: 40px;
  }
}

给Chrome/Safari/Opera设置专属样式 #

如果要单独给这些webkit内核浏览器指定样式，可以用@supports结合webkit特性来实现：

/* 仅webkit内核浏览器（Chrome、Safari、Opera）生效 */
@supports (-webkit-appearance: none) {
  .your-target-class {
    top: 3px;
  }
}

方法2：用JS检测浏览器后添加类名（更灵活） #

如果觉得CSS规则不够灵活，还可以通过JavaScript检测当前浏览器，给HTML根元素添加对应类名，再通过类名写专属样式：

// 检测浏览器并给根元素加类
(function() {
  const agent = navigator.userAgent;
  if (agent.includes('Firefox')) {
    document.documentElement.classList.add('browser-firefox');
  } else if (agent.includes('Chrome') || agent.includes('Safari') || agent.includes('Opera')) {
    document.documentElement.classList.add('browser-webkit');
  }
})();

之后CSS就可以这样写：

/* 通用基础样式 */
.your-target-class {
  top: 17px;
}

/* Firefox专属调整 */
.browser-firefox .your-target-class {
  top: 40px;
}

/* Chrome/Safari/Opera专属调整 */
.browser-webkit .your-target-class {
  top: 3px;
}

额外小建议 #

其实更推荐你先排查下Firefox位置偏差的根源：有时候可能是浏览器默认的margin/padding不同，或者盒模型计算差异。可以先尝试给元素加上box-sizing: border-box;统一盒模型，或者检查是否有其他继承样式干扰，说不定能从根源解决问题，不用依赖浏览器专属规则。但如果确实是浏览器特有渲染差异，上面的两种方法都能完美解决你的需求。

内容的提问来源于stack exchange，提问作者Novus