ie7 dssでのdivの右揃え

Question

以下のマークアップは、2行目のテキストを生成し、2行目のテキストを中央に、右下を2行目に表示します。少なくともFirefoxやie8ではそうです。 ie7では、改行が追加され、3行目に画像が表示されます。私は成功せずにあらゆる種類のものを試してきました。つまり、開発者ツールはそれほど有用ではありません。

ie7でie8のように正しく表示されるようにするにはどうすればよいですか？

<table> 
    <tr><td>blah blah blah blah</td></tr> 
    <tr> 
     <td style="text-align:center;"> 
      Hi 
      <div style="float:right; background-image:url('aaa.png'); height:16px; width:16px;"> 
      </div> 
     </td> 
    </tr> 
</table> 

これは、私が持っているものの非常に単純化されたバージョンです。テーブル構造が必要なので、divのシリーズに変更することはお勧めしません。

Answer 1

テーブルには幅を設定していないので、内容に合わせてできるだけ小さくします。

浮動小数点型を使用してdiv（またはspan）に "Hi"を入れてみてください。これは理論的にはうまくいくはずです。

実際には、両側を親のサイズ（ボーダー、マージン、パディング）のデフォルトに設定するので、両側を実際にスパンに入れたいと思うかもしれません。

これが役に立ちます。

よろしく、

リチャード

編集：これに対する実際の答えが上部及び0に右に16pxの絶対高さ/幅右浮上DIVの位置を設定することも削除float: right。 （私はそこに私の元の答えを残しているので）コメントが意味を成し、b）将来これを読む人は元の答えがうまくいかなかったことを知っている）。

Answer 2

あなたは "こんにちは" の順と<div>を逆に試すことができます：

<table> 
    <tr><td>blah blah blah blah</td></tr> 
    <tr> 
     <td style="text-align:center;"> 
      <div style="float:right; background-color: #f00; height:16px; width:16px;"></div> 
      Hi 
     </td> 
    </tr> 
</table> 

これはクローム、サファリ、Firefoxの、IE7、IE8、およびOperaで同じに見えます。 Chrome、Safari、Firefoxは両方のバージョンを同じにします。 IE7とOperaは同じ問題で元のバージョンをレンダリングします。

私はので、私は、何が起こっていたか見ることができ、レンダリングに影響を及ぼさないはずですが、IE7はそうかもしれない、物事の混乱を作るのではない、むしろ賢いですbackground-colorにbackground-imageを変更しました。