IE 8 兼容模式导致表单提交按钮换行答案

【问题标题】：IE 8 Compatibility Mode Causes Form Submit Button to WrapIE 8 兼容模式导致表单提交按钮换行
【发布时间】：2011-02-01 21:33:39
【问题描述】：

以下代码在使用兼容模式时在我检查的浏览器中执行我想要的操作，除了 IE。

在兼容模式下，提交 (Remove) 按钮将换行到下一行。当不使用兼容模式时，它应该看起来像在 Firefox 或 IE 中的样子。

无法使用float:left/right，因为我无法预先指定长度。

<div>
  <ul style="display:inline-table">
    <li style="text-align:left; white-space:nowrap">
      <div>
        <div style="display:table-cell; width:100%"><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</div>
        <div style="display:table-cell">
          <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
          </form>
        </div>
      </div>
    </li>
    <li style="text-align:left; white-space:nowrap">
      <div>
        <div style="display:table-cell; width:100%"><b>Name: </b>Short Test Name <b>Qty: </b>1</div>
        <div style="display:table-cell">
          <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
          </form>
        </div>
      </div>
    </li>
  </ul>
</div>

【问题讨论】：

标签： html css forms button compatibility-mode

【解决方案1】：

<style>
    form {
        display: inline;
    }
</style>

<ul style="display:inline-table">
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>    
</ul>

【讨论】：

感谢您的回复。您的解决方案的工作原理是按钮不再换行，但我忘记添加我希望提交（删除）按钮在右侧排列。否则，我只会把剩下的所有东西都漂浮起来。对不起，这太痛苦了。