Firefox浮点和NoWrap Bug

Question

因此，我在一个<td>中有几个<table>元素，其中我希望所有元素都在一行上，而不需要包装。默认情况下，我使用的是css white-space: nowrap;，所有元素都是水平对齐的，所以我也使用一些float:right;来空间一些元素。

这在Chrome中非常有用，但在Firefox中，它似乎添加了另一行，这是一个奇怪的错误。在FIREFOX中，我如何将所有内容保持在同一条线上？

设想方案1

<td style="white-space: nowrap;">

    <a data-id="10796" data-pr="MOV1">AGG55TTYY</a>

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; 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="white-space: nowrap;">

   MOV3<span style="font-size:11px; color:#AAAAFF; font-weight:bold; float:right; vertical-align:middle;">#JJ655</span>

</td>

Answer 1

您可以通过向锚添加左浮子来解决问题：

​

<table style="width:100%;">
  <td style="white-space: nowrap;">

    <a data-id="10796" data-pr="MOV1" style="float:left">AGG55TTYY</a>

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; 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>
</table>

​

或者把你的锚放在你的跨度后

​

<table style="width:100%;">
  <td style="white-space: nowrap;">

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; 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>

    <a data-id="10796" data-pr="MOV1">AGG55TTYY</a>

  </td>
</table>

​