IE7浮点数：右侧下方浮动：左侧

Question

我有一个列表，我正在使用一些javascript进行分页。在我测试过的所有浏览器中，一切都运行得很好，但是，其中一个方向导航按钮在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：right链接不会浮动在与float：left的链接相同的级别上。如果有人可以向我解释为什么会发生这种情况（以及为什么它只发生在IE＆lt; 7中），我将非常感激。这对我的屁股来说太长时间了。

Answer 1

可能发生这种情况的原因是.page_link和.previous_link之间标记中显示的.next_link元素会导致浏览器错误地计算布局。

由于两条链接最终会浮动到每一侧（所以你知道.page_link元素的存在不应影响布局），你可以简单地移动.next_link在标记中，将其放在.previous_link之后。最终结果在更现代的浏览器中是相同的，但重新排序应该有助于IE7在布局页面时得出相同的结论。