IE7 Div宽度错误

Question

我遇到了IE7的一个非常奇怪的错误。这是我的HTML结构

<div id="tt_message_kudos_top">
<div id="tt_kudo_position">
    <span> Kudos </span>
</div>
<div id="TT_kudos_reply">
    <div class="lia-message-actions lia-component-actions">

        <div class="lia-button-group">

            <span class="lia-button-wrapper lia-button-wrapper-secondary"><a href="/t5/forums/replypage/board-id/Services/message-id/1" id="link_35" class="lia-button lia-button-secondary reply-action-link lia-action-reply">Reply</a></span>    

        </div>
    </div>
</div>

控制这些div的主要CSS代码是：

#tt_message_kudos_top {
    float: right;
}
#tt_kudo_position {
    float: left;
}
#TT_kudos_reply {
    float: left;
}

该页面看起来很好用firefox，chrome，IE8,9。但是，TT_kudos_reply div会自动扩展宽度空间并浮动到此div的右边缘。 我试图在TT_kudos_reply中给出修复宽度将解决问题，但是，TT_kudos_reply的内容是动态变化的。查看截图。 我也尝试应用lia-button-wrapper，display：inline，它不会影响。

有什么建议吗？谢谢。

干杯， 清

Answer 1

最初的想法 - 清除回复的浮动。这应该迫使它的兄弟姐妹到下一行：

#TT_kudos_reply { clear:right; float: left; }

但是如果没有看到更多的CSS，很难提出一个可靠的建议。

如果您想要一个简单的重构，您可以执行以下操作（假设“接受为解决方案”旨在低于“回复”）... 而不是两者的div，硬编码tt_kudo的宽度，然后使用定义列表作为回复和接受按钮。

<div>Kudo</div>
<dl>
    <dt>Reply</dt>
    <dd>Accept</dd>
</dl>

由于DL的默认行为似乎适用于您的设计，因此设计它以满足您的需求应该很容易。