Firefox水平多选组件布局异常兼容问题求助

嘿，我之前做多选组件的时候也踩过Firefox原生<select multiple>的样式坑，给你两个靠谱的解决方案：

方案一：用自定义组件模拟（推荐，兼容性拉满） #

原生<select>的样式渲染逻辑在不同浏览器里差异很大，尤其是多选模式，与其费劲调兼容，不如直接用HTML+CSS+JS模拟一个多选容器，完全可控。

修改后的代码： #

HTML

<form>
  <div id="data" class="custom-multi-select">
    <div class="option">jan</div>
    <div class="option">feb</div>
    <div class="option">mar</div>
    <div class="option">apr</div>
    <div class="option">maj</div>
    <div class="option">jun</div>
    <div class="option">jul</div>
    <div class="option">aug</div>
    <div class="option">sep</div>
    <div class="option">okt</div>
    <div class="option">nov</div>
    <div class="option">dec</div>
  </div>
</form>

CSS

* { box-sizing: border-box; }
#data { 
  overflow-y: auto; /* 内容超出时垂直滚动 */
  padding: 0; 
  width: 100vw; 
  background-color: #eee;
  height: 200px;
}
.custom-multi-select {
  display: flex;
  flex-wrap: wrap; /* 核心：让子元素自动换行 */
}
.option {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color: white;
  margin: -1px 0 0 -1px; /* 抵消相邻元素的边框重叠 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none; /* 禁止选中文本 */
}
/* 选中状态样式 */
.option.selected {
  background-color: #ccc;
}

JS（处理多选逻辑）

const options = document.querySelectorAll('.option');
options.forEach(opt => {
  opt.addEventListener('click', () => {
    opt.classList.toggle('selected');
    // 如果需要同步到表单提交，可以在这里维护一个隐藏的input，把选中值存进去
  });
});

这个方案的好处是所有浏览器表现完全一致，还能自由扩展交互（比如支持Ctrl/Shift批量选择、搜索过滤等），适合长期维护的项目。

方案二：Firefox专属CSS Hack（仅限原生select场景） #

如果因为某些原因必须用原生<select multiple>，可以用Firefox专属的CSS规则强制调整布局：

* { box-sizing: border-box; }
#data { overflow:hidden; padding:0; width:100vw; }
select { 
  padding:0; 
  padding-left:1px; 
  border:none; 
  background-color:#eee; 
  width:100%; 
  white-space: normal; 
  height:200px; 
}
option { 
  height:100px; 
  width:100px; 
  border:1px solid #000; 
  background-color:white; 
  margin-left:-1px; 
  display:inline-block; 
}

/* 仅对Firefox生效的规则 */
@-moz-document url-prefix() {
  select[multiple] {
    white-space: pre-wrap; /* 强制内部文本换行 */
    overflow-y: auto; /* 保留垂直滚动 */
  }
  option {
    float: left; /* 让选项横向排列并自动换行 */
    clear: none;
    margin-bottom: -1px; /* 抵消上下边框重叠 */
  }
}

原理是利用@-moz-document url-prefix()只针对Firefox应用样式，通过调整float和white-space让选项实现换行。不过要注意：原生select的一些默认行为（比如选中高亮、键盘导航）可能会受影响，而且这种hack可能随着Firefox版本更新失效，所以只建议临时应急用。

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