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>
精彩评论