Question

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

在兼容模式下，提交（删除）按钮将换行到下一行。当不使用兼容模式时，它应该像在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>

Answer 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>

IE 8兼容模式导致表单提交按钮包装

1 个答案: