IE7浮動：右滴下浮動：左

我有一個列表，我使用一些JavaScript分頁。在我測試過的所有瀏覽器中，一切正常，但是，其中一個方向導航按鈕在IE7中（不在IE8中）下降。IE7浮動：右滴下浮動：左

screenshot

的標記看起來是這樣的：

<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：left相同的級別上。如果有人能向我解釋爲什麼會發生這種情況（爲什麼它只發生在IE < 7），我將非常感激。這對我來說太長時間了，這是一個痛苦。

來源

2011-07-12 Tommy Brunn

嘗試將'.next_link'上移到'.previous_link'後面的標記中。一般不應該影響顯示，但可以在這裏解決問題。 – Jon

喬恩 - 從你的評論中創建一個答案，我會接受它。在.previous_link旁邊移動.next_link解決了問題。 –

已創建答案。很高興有幫助。 :) – Jon

這可能發生的一個原因是.previous_link和.next_link之間的標記中出現的.page_link元素會導致瀏覽器錯誤地計算佈局。

由於兩個鏈接將被浮動到底每側不管（你知道，這樣.page_link元素的存在不應該影響佈局）什麼，你可以簡單地移動.next_link起來的標記，只是把它之後.previous_link。最終結果將在更現代的瀏覽器中保持不變，但重新排序可幫助IE7在佈置頁面時達到相同的結論。

來源

2011-07-12 13:18:17 Jon

我只是偶然發現了這個問題，如果你不能改變HTML，你會怎麼做呢？（我在一些問題上收到了一些反對票，並暫時失去了詢問權限的問題，否則我會問這是一個新問題！） –

@RickDonohoe：真的取決於具體情況。 – Jon

對於我能適應的評論....我基本上有一個容器div（標準頁面寬度〜960px），裏面有3個按鈕。一個向左漂浮，坐在沒有浮動的第二個按鈕旁邊。第三個按鈕漂浮在容器另一側的右邊，但是在ie7中，它掉落。我正在使用從Drupal開發傳遞的代碼，所以不能真正改變它，除非它非常重要。謝謝你的回覆，並且對這種評論的做事感到抱歉！ –

IE7浮動：右滴下浮動：左

回答

相關問題