CSS навигация по ссылкам браузер совместимость

Question

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

Сегодня я проверил свою страницу на телефоне, и она не отображалась корректно в Opera или Internet Explorer. Когда я вернулся домой, я проверил Internet Explorer 6, и он выглядит так же.

HTML

<div id="navcontainer"><ul>
    <li><a href="">Home</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="" id="current">Resume</a></li>
    <li><a href="">Referances</a></li>
    <li><a href="">Fun</a></li>
</ul></div>

CSS

#navcontainer>ul{
    text-align: center;
    padding: 3px 0;
}

#navcontainer>ul>li {
    display: inline;
}

#navcontainer>ul>li>a {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #bbd;
}

#navcontainer>ul>li>a:hover {
    background-color: #369;
}

#navcontainer>ul>li>a#current {
    background: #fff;
    border-bottom: 1px solid white;
}

Каков наилучший способ изменить это, чтобы оно было более совместимым с браузером?

Answer 1

IE6 не очень нравится display:inline. Попробуйте float:left на своих li s и на li a.

Кроме того, IE6 не поддерживает дочерний селектор >.

Answer 2

Для элементов li вы должны установить:

 float: left;
 display: inline;
 list-style-type: none;

Answer 3

Например, Internet Explorer 6 не поддерживает используемый вами непосредственный дочерний селектор (>).

Answer 4

Итак, проблема была в этом?

<div id="navcontai<b>ner"<ul></b>
 <li><a href="">Home</a></li>
 <li><a href="">Projects<a href="" id="current">Resume/a></li>
 <li><a href="">Referances<a href="">Fun

Что должно быть

<div id="navcontai<b>ner"><ul></b>
 <li><a href="">Home</a></li>
 <li><a href="">Projects<a href="" id="current">Resume/a></li>
 <li><a href="">Referances<a href="">Fun