IE7 Div宽度错误

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

<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>

主要CSS代码来控制这些DIV是：

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

页面看起来罚款，火狐，Chrome，IE8,9。但是，TT_kudos_reply div会自动扩展宽度空间并浮动到此div的右边缘。我试图给TT_kudos_reply修复宽度会解决问题，但是TT_kudos_reply的内容是动态改变的。查看屏幕截图。我也尝试应用lia-button-wrapper，显示：inline，它不会影响。

有什么建议吗？谢谢。

干杯，清

Screenshot1 Screenshot2

来源

2011-09-22 QLiu

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

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

但是，如果没有看到您的更多的CSS，这是很难做出了坚实的建议。

如果你想做一个简单的重构，你可以做以下事情（假设“接受为解决方案”的目的是低于“回复”）...... 而不是div这两个硬代码tt_kudo的宽度，然后使用回复和接受按钮的定义列表。

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

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

来源

2011-09-22 12:39:08 Dawson

IE7 Div宽度错误

回答

相关问题