css - IE7 漏洞 : float:right width 100% rather than element sizes

Question

我正在尝试一些非常简单的事情。

我在一个 div 中有两个按钮。一个需要向右浮动，一个需要向左浮动

<div class="btnwrapper">
    <div class="btnright"><a href="#" class="button"><span>Continue</span></a></div>
    <div class="btnleft"><a href="#" class="button optionleft"><span>Back</span></a></div>
    <div style="clear:both;"></div>
</div>

以及对应的CSS

.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }

这是我在 IE7 中得到的结果。所有其他现代浏览器都能正确处理这个问题。

Answer 1

从 a.button 中移除 float: right。

有了它:http://jsfiddle.net/K8XQr/

没有它:http://jsfiddle.net/K8XQr/1/

它们看起来一模一样，只是丢失 float: right 在 IE7 中修复了它。