css - float プロパティを使用して css でこの画像が水平方向に整列しないのはなぜですか。

Question

あなたが私に提供できる助けを前もって感謝します - 私はこのページを私の慈善団体のウェブサイトで機能させようとしています. IE を除くすべてのブラウザで完璧に見えます。IE では、他の画像の隣に浮かぶはずの長い縦長の画像が、横方向に整列していません。

ここでライブを見ることができます：www.worldofchildren.org

ここで外部スタイルシートを参照します。

<link rel="stylesheet" href="/bannerincludes/boxes.css" type="text/css" media="screen">

ページ上のコードは次のとおりです。

<div style="width:868px;">
<div style="float:left; position: relative;margin-left:25px; margin-top:20px;width:533px;"">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">meet the 2012 honorees</h1>

<div style="float:left;">


<div class="hover-div1" style="margin-right:6px; margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/dallas.jpg">
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/393" style="color:#fff;">Dallas Jessup <br> 2012 Youth Award Winner</a></div>
</div>


<div class="hover-div2" style="margin-right:6px; margin-bottom:4px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/craig.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/395" style="color:#fff;">Craig Kielburger <br> 15th Anniversary Achievement Award Winner</a></div>
</div>

<div class="hover-div3" style="margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/alina.jpg">
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/396" style="color:#fff;">Alina Cho <br> 2012 Board of Governors' Award Winner</a></div>
</div>
<br>
<br>

<div class="hover-div4" style="margin-right:5px; margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/dryoung.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/390" style="color:#fff;">Dr. Nilas Young <br> 2012 Health Award Winner</a></div>
</div>


<div class="hover-div5" style="margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/kyle.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/392" style="color:#fff;">Kyle Weiss <br> 2012 Youth Award Winner</a></div>
</div>
</div>

<div style="float:right !important;">
<div class="hover-div6" style="margin-bottom:5px;">
<img src="http://www.worldofchildren.org/images/banner/benito.jpg" >

<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/391" style="color:#fff;">
Beno&#238;t Duch&#226; teau-Arminjon<br> 2012 Humanitarian Award Winner</a></div>
</div>

</div>
</div>




<div style="float:right; margin-top:20px;margin-right:30px; ">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">15th annual awards</h1>

<p style="max-width:250px; font-family:helvetica;sans-serif; font-size:14pt;color:#777; font-weight:lighter; line-height:100%;">Join us as we celebrate the work of six exceptional heroes who have dedicated their lives to serving children in need. Much more than a ceremony, our Awards change the lives of those who attend and the children our Honorees serve.</p>
<br>
<center><a href="http://www.worldofchildren.org/awardsceremony.html"><img src="http://www.worldofchildren.org/images/banner/lm.jpg" border="0"></a><br>

Interested in Sponsorship Opportunities?<br>
<a href="http://www.worldofchildren.org/sponsorships">Click here</a>
</center>

</div>



</div>

Answer 1

width: 420px;左に浮かせた DIV (ボックスの最初のチャンク) に幅を置きます。フロートされていても、IE は親の全幅を与えているため、右側にボックスを配置する余地がありません。

Answer 2

フローティング コンテナーに幅を追加します。現在、幅がなく、IE はインライン スペースを左側の浮動要素で埋めています。

これらを IE でデバッグするには、IE 開発者ツールを使用できます。

1. IE で F12 キーを押します。
2. 開発者ツールで、左上の「マウス」アイコンをクリックします。これが選択ツールです。
3. セレクター ツールで、問題が発生している Web サイトの領域を選択します。

あなたの場合、幅が現在動的であるため、フロートされた左要素が広すぎることがわかります。IEは、水平領域の100％を埋めるようにしています。

Answer 3

float の代わりに、これは IE9 で動作します

position: absolute;
right: 0;
bottom: 0;