Internet Explorer：相对定位的按钮在绝对定位的框中对齐

Question

在 IE7 中，我的订单示例按钮“#itmSampl”并未与其左侧的“.add-to-cart”按钮垂直对齐，但在 FF3.6 和 Chrome 5 中却如此。我需要它在 IE6-8 中正确对齐。有人看到我错过了什么吗？

<style type="text/css">
#buttonbox { position:relative; width:326px; }

#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>

<div id="buttonbox">
    <div id="addtocart2" class="add-to-cart">
    <table><%=getCurrentAttribute('item','addtocarthtml')%></table>
    </div>
    <div id="ordrWizrd" class="add-to-cart"><a href="javascript:shwWizd()"><img src="/images/img/add-to-cart.gif" alt="configure item"></a></div>     
    <div id="itmSampl"></div>
    </div>  <div class="clearfix"></div> </div>

另外，如果视觉效果有帮助的话，这里是测试页面（您必须登录才能看到按钮而不是项目符号列表）： http://www.avaline.com/85W_test_2 登录：[电子邮件受保护] 通过：test03

Answer 1

解决方案 1：由于您已经在页面中使用了很多表格，因此另一个表格不会有什么坏处 - 只需将您的 HTML 从上面的内容更改为类似这样的内容（可能需要一些调整） ：

<div id="buttonbox">
    <div id="addtocart2" class="add-to-cart">
        <table><tr>
            <td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
            <td valign="bottom"><div id="itmSampl"></div></td>
        </tr></table>
    </div>
    <div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->

解决方案 2：使用 #itmSample 删除所有“position:absolute”内容（删除 CSS 底部、位置、右侧，也许还有边距和高度/宽度属性）。然后，添加 CSS float: right; margin-top: -36px; 到#itmSample，使其向右浮动并向上移动 36 像素。