我完全懂你遇到的糟心问题——在Chrome里能好好让多选下拉的选项横向排列，但Firefox里给<option>加了float:left后，每个选项还是硬要占满整行。这其实是因为不同浏览器对原生<select multiple>的样式渲染限制差异很大，Firefox对<option>元素的布局属性支持特别有限，像float这类属性在它的原生option上基本不起作用。

下面给你几个可行的解决方案，按推荐程度排序：

方案一：用自定义DOM结构模拟多选组件（最推荐） #

原生select的跨浏览器样式兼容性一直是个大坑，不如直接用div、span这类元素模拟多选功能，这样样式完全由你掌控，再也不用看浏览器脸色。比如可以这么实现：

HTML结构 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="custom-multiselect">
  <div class="option-item" data-value="1">Lorem ipsum dolor sit amet Molestias,</div>
  <div class="option-item" data-value="2">Consectetur adipisicing elit.</div>
  <div class="option-item" data-value="3">Similique alias</div>
  <div class="option-item" data-value="4">Maiores fugiat voluptate</div>
  <div class="option-item" data-value="5">Molestiae modi amet eaque qui atque eius</div>
  <div class="option-item" data-value="6">Magni, doloremque hic consequatur minus</div>
  <div class="option-item" data-value="7">Voluptatem libero maxime porro.</div>
  <!-- 隐藏一个原生select用来同步提交数据 -->
  <select multiple="true" class="hidden-select">
    <option value="1">Lorem ipsum dolor sit amet Molestias,</option>
    <option value="2">Consectetur adipisicing elit.</option>
    <option value="3">Similique alias</option>
    <option value="4">Maiores fugiat voluptate</option>
    <option value="5">Molestiae modi amet eaque qui atque eius</option>
    <option value="6">Magni, doloremque hic consequatur minus</option>
    <option value="7">Voluptatem libero maxime porro.</option>
  </select>
</div>

CSS样式 #

.custom-multiselect {
  border: none;
  outline: none;
  width: 100%;
  height: 200px;
  overflow-y: auto;
  padding: 2px;
}
.option-item {
  float: left;
  border: solid 1px #71aa29;
  padding: 5px;
  margin: 2px;
  transition: 0.2s ease;
  cursor: pointer;
  border-radius: 3px;
}
.option-item.selected, .option-item:hover {
  background: #71aa29 linear-gradient(0deg, #71aa29 0%, #71aa29 100%);
  color: #ffffff;
}
.hidden-select {
  display: none;
}

JavaScript逻辑 #

$('.option-item').click(function() {
  const $this = $(this);
  const value = $this.data('value');
  // 切换自定义选项的选中状态
  $this.toggleClass('selected');
  // 同步隐藏的原生select的选中状态，保证提交数据正常
  $('.hidden-select option[value="' + value + '"]').prop('selected', $this.hasClass('selected'));
});

这种方式不管在Chrome还是Firefox里，样式和交互都会完全一致，后续要改样式也有更大的自定义空间。

方案二：针对Firefox做特殊兼容（仅适用于简单场景） #

如果一定要坚持用原生<select multiple>，可以试试用Firefox相对支持较好的属性替代，不过效果可能有限：

• 用display: inline-block替代float:left，Firefox对inline-block的支持比float友好一些
• 加上Firefox的私有文档规则做单独适配：

@-moz-document url-prefix() {
  select[multiple='true'] option {
    display: inline-block;
    width: auto;
    clear: none;
  }
}

但要注意，原生select的渲染限制依然存在，这种方法不一定能完全达到你想要的横向排列效果。

方案三：使用成熟的多选插件 #

如果不想自己写代码折腾，也可以直接用Select2、Chosen这类成熟的多选插件，它们已经帮你处理好了所有跨浏览器兼容性问题，样式也支持高度自定义。

总结一下，最稳妥的还是方案一，用自定义组件模拟，彻底解决浏览器兼容性的痛点。

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