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

デモ：IE7のhttp://jsfiddle.net/w9Vdh/6/embedded/result/

スクリーンショット：

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）では、.thread-item-sent .thread-item-dateスタイルのCSSにコメントが表示されます。これは、問題と思われるCSSを示しています。そのCSSを取り除くと、バブルのサイズは正しくなりますが、日付は失われています。