javascript - CSS 图像右对齐 - Firefox 6.02 中的额外行

Question

我有一个右对齐的图像，它在 IE9 和 Chrome 14 中工作正常。在 Firefox 6.02 中我确实得到了一条额外的线。应用程序正在使用 jQuery UI。 我怎样才能避免这种情况？是我的 CSS 出了什么问题，还是 Firefox 6 有所不同 - 据我所知，它与 FF5 中的 Chrome 相同。

<tr class="ui-widget-content sideBarTopAlign">
  <td>Data file:</td>
  <td colspan="3"><div id="inputDatafileInfo">not read</div>
     <button class="ui-button sideBarRightAlign">
     <span class="ui-icon ui-icon-link" title="Show data file"></span></button>
  </td>
</tr>

与:

/* align some elements explicitly right */
.sideBarRightAlign { float: right; margin-right: 1px; }

/* align some elements explicitly right */
.sideBarTopAlign { vertical-align: top; }

来自 jQuery UI 的样式

button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-button { cursor: pointer; display: inline-block;
    margin-right: 0.1em; overflow: visible; padding: 0;
    position: relative; text-align: center; text-decoration: none !important;}

另一个发现，它似乎与 colspan 有关，如果我将它移动到 4 列的最后一个，它会按预期显示。

Answer 1

no-wrap 应用于父 div 部分。我不明白为什么这会导致额外的换行符——而且只在 FF 中——但这是根本原因。