开发者

IE 8 Compatibility Mode Causes Form Submit Button to Wrap

The below code does what I want in browsers I check with except IE when using compatibility mode.

In compatibility mode the submit (Remove) button wraps to the next line. It should look like it does in Firefox or IE when not using compatibility mode.

Can't use float:left/right because I cannot specify length beforehand.

<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&g开发者_高级运维t;
        <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>


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜