仅Firefox中自定义按钮CSS渲染异常，求修复方案

我通过JS在筛选框左侧添加了两个按钮，该按钮在Chrome和Edge中显示正常，但在最新版Firefox（v115.0.2）中显示异常。目前我只能通过Firefox专属CSS hack隐藏按钮，想请教如何调整才能让按钮在Firefox中正常渲染。

相关信息 #

• 按钮使用的CSS样式：

.buttonfile {
  text-indent: 0;
  float: left;
  display: block;
  margin-right: 16px;
  margin-top: 8px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  height: 25px;
  cursor: pointer;
}

• 当前临时隐藏按钮的Firefox专属hack：

@-moz-document url-prefix() {.buttonfile{ display:none; } }

• 补充说明：已提供按钮正常显示效果、对应HTML结构、Firefox异常显示效果、筛选框样式的截图参考。

可行修复方案 #

1. 统一盒模型计算逻辑 #

Firefox与Chrome/Edge在元素高度计算上可能存在差异，给按钮添加box-sizing: border-box，确保设置的height:25px包含边框和内边距，避免高度溢出：

.buttonfile {
  box-sizing: border-box;
  /* 保留原有样式 */
  text-indent: 0;
  float: left;
  display: block;
  margin-right: 16px;
  margin-top: 8px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  height: 25px;
  cursor: pointer;
}

2. 建立BFC解决浮动布局问题 #

Firefox对浮动元素的布局处理可能受父容器影响，给按钮的父容器添加overflow: auto或display: flow-root，创建独立的块格式化上下文（BFC），避免浮动元素导致的布局错乱：

/* 假设父容器类名为filter-bar */
.filter-bar {
  overflow: auto;
  /* 或 display: flow-root; */
}

3. 替换浮动为Flex布局（推荐） #

浮动布局的浏览器兼容性差异较大，改用Flex布局可以更稳定地实现横向排列：

• 给按钮的父容器添加Flex样式：

.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px; /* 替代margin-right实现间距 */
  padding-top: 8px; /* 替代按钮的margin-top */
}

• 调整按钮样式，移除浮动和相关外边距：

.buttonfile {
  text-indent: 0;
  display: block;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  height: 25px;
  cursor: pointer;
}

4. 清除Firefox默认按钮样式 #

Firefox会给按钮添加默认样式，可能与自定义样式冲突，添加appearance属性清除默认样式：

.buttonfile {
  appearance: none;
  -moz-appearance: none;
  /* 保留原有样式 */
}

内容的提问来源于stack exchange，提问作者Patrick from NDepend team