IE7浮動小数点数：浮動小数点の横に右に落ちる：左

Question

私はいくつかのJavaScriptを使用してページを設定しているリストがあります。私はそれをテストしたすべてのブラウザですべてが正常に動作しますが、方向性ナビゲーションボタンの1つがIE7（IE8ではなく）にドロップされます。

マークアップは次のようになります。

<div id="index_qa_nav" class="pagination_nav"> 
    <a class="previous_link" href>Prev</a> 
    <a class="page_link first active_page" href style="display: inline-block;">1</a> 
    <a class="page_link" href style="display: inline-block;">2</a> 
    <a class="page_link" href style="display: inline-block;">3</a> 
    <a class="page_link" href style="display: inline-block;">4</a> 
    <a class="page_link last" href style="display: inline-block;">5</a> 
    <a class="next_link" href>Next</a> 
</div> 

そして、CSS、次のようになります右：

.pagination_nav { 
    text-align: center; 
    clear:both; 
} 

.pagination_nav .previous_link { 
    float: left; 
    margin-left: 12px; 
    height: 16px; 
    width: 11px; 
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat; 
    text-indent: -9999px; 
} 

.pagination_nav .next_link { 
    float: right; 
    margin-right: 12px; 
    height: 16px; 
    width: 11px; 
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat -11px; 
    text-indent: -9999px; 
} 

.pagination_nav .page_link { 
    margin-bottom: 8px; 
    margin-right: 4px; 
    width: 9px; 
    height: 11px; 
    text-indent: -9999px; 
    white-space: nowrap; 
    background: url(/gfx/pajination/dots.png) no-repeat 0 1px; 
} 

.pagination_nav .active_page { 
    width: 11px; 
    height: 11px; 
    background: url(/gfx/pajination/dots.png) no-repeat -8px; 
} 

今、私は、なぜfloatを見つけ出すように見えることはできませんリンクはfloat：leftのリンクと同じレベルでは浮動しません。誰かがなぜ私にこのようなことが起こったのか説明できたら（それはIE < 7でしか起こらない）、私はとても感謝しています。これはあまりにも長い間私のお尻の痛みでした。

Answer 1

.previous_linkと.next_linkの間のマークアップに表示される.page_linkの要素によって、ブラウザでレイアウトが正しく計算されないことがあります。

2つのリンクが関係なく、（あなたが.page_link要素の存在がレイアウトに影響を与えるべきではないことを知っている）、あなたは、単にマークアップで.next_linkを上に移動し、それを置くことができるものを最後にそれぞれの側に浮いてませんので、 .previous_linkの後。最終的な結果はより現代的なブラウザでも同じですが、並べ替えはIE7がページをレイアウトするときに同じ結論に達するのに役立ちます。