Firefox中CSS Float与NoWrap兼容问题求助

这个问题我之前也踩过坑！Firefox对float和white-space: nowrap的组合处理逻辑和Chrome不一样——当你给元素加float:right后，它会脱离正常文档流，Firefox不会把它和td内的其他inline内容一起纳入white-space: nowrap的约束范围，导致空间计算出错，最终出现换行。

最靠谱的跨浏览器解决方案是用CSS Flexbox替代float，它能完美实现左右对齐，同时保证内容不换行，代码也更简洁：

场景1修改后代码 #

<td style="display: flex; justify-content: space-between; align-items: center; white-space: nowrap;">
  <a data-id="10796" data-pr="MOV1">AGG55TTYY</a>
  <span style="font-size:13px; color:#0fb124; font-weight:bold; vertical-align:middle;">
    <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
    <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
    <span style="font-size:11px; color:#cc0000;">2</span>
  </span>
</td>

场景2、3修改后代码 #

<td style="display: flex; justify-content: space-between; align-items: center; white-space: nowrap;">
  MOV3
  <span style="font-size:11px; color:#AAAAFF; font-weight:bold; vertical-align:middle;">#JJ655</span>
</td>

为什么这个方案有效？ #

• display: flex把td变成flex容器，内部的子元素会自动成为flex项，不会脱离文档流
• justify-content: space-between自动将左右内容分别推到容器的两端，完美替代float:right的效果
• align-items: center保证所有内容垂直居中，和你原来的vertical-align:middle效果一致
• white-space: nowrap确保每个flex项内的文本不会换行，同时flex容器默认不会让子项换行（除非你主动添加flex-wrap: wrap）

如果你需要兼容非常老旧的浏览器（比如IE9及以下），可以用这个备选方案（需要手动调整宽度适配内容）：

<!-- 场景1备选 -->
<td style="white-space: nowrap; width: 100%;">
  <a data-id="10796" data-pr="MOV1" style="display: inline-block;">AGG55TTYY</a>
  <span style="display: inline-block; font-size:13px; color:#0fb124; font-weight:bold; vertical-align:middle; text-align:right; float: none; width: calc(100% - 100px);">
    <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
    <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
    <span style="font-size:11px; color:#cc0000;">2</span>
  </span>
</td>

不过还是更推荐Flexbox方案，现在主流浏览器都支持，代码维护性更强。

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