IE7 - 你如何使消息泡泡工作？

Question

我正在尝试制作一个消息泡泡，并且我已经在所有浏览器上工作，IE7除外。气泡需要围绕可变宽度内容进行包装，因此它的宽度将取决于内容量。它可能会增长到100％，但如果消息很短，它可能只有100px宽。这是我遇到IE问题的地方。

这是一个jsfiddle：http://jsfiddle.net/w9Vdh/

气泡的主要构造是顶行，中行和底行。我有一个精灵和一些其他背景图像，我用它渲染图形。这是HTML：

<div class="thread-item-wrapper">
    <div class="thread-item-horiz thread-item-top">
        <div class="thread-item-corner thread-item-topleft"></div>
        <div class="thread-item-corner thread-item-topright"></div>
    </div>
    <div class="thread-item-middle">
        <div class="thread-item-content-wrapper">
            <div class="thread-item-label">You:</div>
            <div class="thread-item-content">
                <div class="thread-item-msg">
                    <div class="thread-item-content-top"></div>
                    <p>Message</p>
                </div>
            </div>
        </div>
    </div>
    <div class="thread-item-horiz thread-item-bottom">
        <div class="thread-item-corner thread-item-bottomleft"></div>
        <div class="thread-item-corner thread-item-bottomright"></div>
    </div>
    <div class="thread-item-date">Aug 18, 2011 12:01 PM</div>
</div>

这是它应该是什么样子：

这就是IE7中的样子：

Answer 1

查看代码和演示的小提琴 -

小提琴：http://jsfiddle.net/w9Vdh/6

演示：http://jsfiddle.net/w9Vdh/6/embedded/result/

IE7的屏幕截图：

更新了针对IE7发送的修复泡泡的小提琴

小提琴：http://jsfiddle.net/8NpwH/2/

演示：http://jsfiddle.net/8NpwH/2/embedded/result/

代码html的变化：

<div class="thread-item-clear">&nbsp;</div>
            <div class="thread-item-date"><div style="text-align:right;">Mar 23, 2012 12:41 PM</div></div>

Css：

.thread-item-sent .thread-item-date {/*clear:left; float:right;*/ margin:0px 4px 0 15px; } /* <--- this line --- */

Answer 2

“收到消息”工作......泡泡很好地包装到消息宽度。但是，已发送的消息正在全宽度显示，而不是正确调整消息宽度。这与日期有关。在我的小提琴（jsfiddle.net/8NpwH）中，你会在CSS上看到.thread-item-sent .thread-item-date样式的注释，它表示看起来像是问题的CSS。如果你摆脱那个CSS，气泡大小正确，但缺少日期。