IE7 div 宽度错误答案

【问题标题】：IE7 Div width bugIE7 div 宽度错误
【发布时间】：2011-09-22 21:13:36
【问题描述】：

我在 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，它不会影响。

有什么建议吗？谢谢。

干杯，清

【问题讨论】：

标签： css layout internet-explorer-7

【解决方案1】：

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

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

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

如果您愿意进行简单的重构，您可以执行以下操作（假设“接受为解决方案”旨在低于“回复”）... 代替div ，硬编码tt_kudo 的宽度，然后使用定义列表作为回复和接受按钮。

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

由于 DL 的默认行为似乎适用于您的设计，因此可以很容易地对其进行样式设置以满足您的需求。

【讨论】：