IE7 float: справа падает рядом с float: left - PullRequest
Новая
       9

IE7 float: справа падает рядом с float: left

1 голос
/ 12 июля 2011

У меня есть список, который я разбил на страницы с использованием некоторого JavaScript. Все работает абсолютно нормально во всех браузерах, в которых я его тестировал, однако одна из кнопок со стрелками навигации не работает в IE7 (не в IE8).

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;
}

Теперь я не могу понять, почему ссылка с плавающей точкой: справа не будет плавать на том же уровне, что и ссылки с плавающей точкой: слева. Если бы кто-то мог объяснить мне, почему это происходит (и почему это происходит только в IE <7), я был бы очень благодарен. Это было боль в моей заднице слишком долго. </p>

1 Ответ

2 голосов
/ 12 июля 2011

Причина, по которой это может произойти, состоит в том, что элементы .page_link, которые появляются в разметке между .previous_link и .next_link, заставляют браузер неправильно вычислять макет.

Поскольку две ссылки в конце будут перемещаться к каждой стороне независимо от того, что (так что вы знаете, что наличие .page_link элементов не должно влиять на макет), вы можете просто переместить .next_link вверх в разметке и поместите его сразу после .previous_link. Конечный результат будет таким же в более современных браузерах, но изменение порядка должно помочь IE7 прийти к тому же выводу при разметке страницы.

...