Firefox浏览器下select下拉选项列表与select元素不对齐问题咨询

该问题本质是Firefox的原生渲染bug，当元素通过margin: auto在奇数宽度容器内居中时，会产生0.5px的小数像素偏移，而原生下拉列表的位置计算默认取整，最终出现1px左右的错位。无需调整原有宽度的修复方案如下：

• 触发GPU渲染修正偏移
  给select元素添加CSS属性触发GPU渲染路径，直接修正小数像素对齐误差：

  select {
    transform: translateZ(0);
  }
  

  该方案改动最小，大部分场景下可直接修复问题。

• 修改居中实现逻辑
  把原父容器的margin: auto居中替换为flex布局居中，规避margin居中的奇数宽度计算问题：

  /* select的父div新增样式 */
  div {
    display: flex;
    justify-content: center;
  }
  /* 原有的margin: auto可删除 */
  

• 自定义下拉组件绕过原生bug
  禁用原生select的默认外观，自主实现下拉列表，完全不受浏览器原生控件的渲染逻辑影响：

  select {
    -moz-appearance: none;
    appearance: none;
    /* 自行补充背景、下拉箭头等自定义样式即可 */
  }
  

• 轻量兼容方案
  若不想改动现有布局逻辑，给select添加1px的透明内边距抵消计算偏差即可：

  select {
    padding-right: 1px;
    box-sizing: border-box;
  }
  

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