IE7 первый плавающий div сидит выше остальных, остальные выровнены отлично

Question

У меня есть проблема, когда у меня есть набор href, плавающих рядом друг с другом.Это прекрасно выглядит во всех браузерах, кроме старых версий IE, в которых первая ссылка находится выше всех других ссылок.

CSS:

.google_pager 
{
width:500px;
white-space:normal;
padding:20px 0 10px 0;
font-weight:bold;
font-size:1.1em;
overflow:auto;
}

.google_pager span 
{
background-color:#6699C9 !important;
padding: 2px 6px;
color:#FFFFFF !important;
float:left;
height:0;
}

.google_pager a 
{ 
padding: 2px 6px;
text-decoration:none;
float:left;
height:0;
}

Выбранная ссылка на пейджер становится промежутком вместо ссылки.

Любая помощь приветствуется!

Answer 1

У меня была такая же проблема с PHP списками. Не уверен, что это именно ваша проблема, но убедитесь, что закрывающий тег ul находится на новой строке. Например, я использовал эту строку кода для моего последнего li,

    echo "<li><a href='#'>link</a></li>\n";

Звучит странно, но моя проблема выглядела точно так же, как пример изображения, который вы предоставили.

(P.S.) Я понимаю, что этот вопрос задавался примерно 6 месяцев назад, но, надеюсь, кто-то найдет этот вопрос полезным, так как он меня расстраивал, пока я не наткнулся на решение случайно!

Answer 2

Это лучший (будучи семантическим) шаблон для списков ссылок.Следуйте этому, и они будут работать нормально:

<div class="pages">
<ul>
    <li><a href="...">First</a></li>
    <li><a href="...">1</a></li>
    <li><a href="...">2</a></li>
    <li><a href="...">3</a></li>
    <li><a href="...">Last</a></li>
</ul>
</div>

CSS:

.pages ul, .pages li {
   list-style=type:none;
   padding:0;
   margin:0    
}


.pages li {
    display:inline-block   
}  

Answer 3

Хотя я не мог воспроизвести проблему без вашего HTML, попробуйте применить display: block к .google_pager span и .google_pager a.

PS. Также, по какой-то конкретной причине вы указываете нулевую высоту?