Проблема с типом списка в Internet Explorer

Question

.work .nav {
    list-style: none;
    margin: 0 0 5px 5px;
    padding: 0;
    position:absolute;
    top:248px;
    left:15px;
    z-index: 2;
}
.work .nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.work .nav li {
    float: left;
    margin-right: 5px;
}
.work .nav li a {
    float: left;
    display: block;
    padding-top: 10px;
    width: 10px;
    height: 0;
    border: 1px solid #ccc;
    overflow: hidden;
}
.work .nav li a:hover {
    background: #bbb;
}
.work .nav li a.on {
    background: #ccc;
}

Это , как это выглядит в Firefox и Internet Explorer. в Firefox он выглядит идеально, но в IE все портится.

Как я могу решить эту проблему?

Спасибо всем.

Answer 1

Измените следующий фрагмент CSS:

.work .nav li {
    float: left;
    margin-right: 5px;
    height: 10px;
    line-height: 0px;
}

Это заставит его вести себя правильно, хотя у меня не было IE8 под рукой для тестирования. Я использовал   для содержания ссылки.

Answer 2

Используя ваш CSS и HTML-код Алиста Нока, я смог воспроизвести проблему, переведя IE (IE8 и IE8 в режим IE7) в режим quirks . В стандартном режиме он прекрасно воспроизводится, и я думаю, что вы можете решить свою проблему, включив в ваш HTML действительный DOCTYPE .

Я использовал панель инструментов разработчика IE , чтобы переключаться между странностями и стандартным режимом (а также режимами IE8 и IE7). Это очень удобно.

Answer 3

Возможное исправление (работает для меня в IE8 и Firefox 3) - удалить верхнюю часть отступа и изменить ее на высоту: 10 пикселей, а затем сделать цвет текста таким же, как фон, например:

.work .nav li a {
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    color:#fff;
    overflow: hidden;
}

.work .nav li a:hover {
    background: #bbb;
    color:#bbb;
}
.work .nav li a.on {
    background: #ccc;
    color:#ccc;
}

(редактировать: для HTML, который я использовал:

<div class="work">
<ul class="nav">
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
</ul>
</div>

)