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浮动：右滴下浮动：左

回答

相关问题