2010-02-05 2 views
0

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

Я проверил свою страницу сегодня на своем телефоне, и он не отображался правильно в 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; 
} 

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

+0

Является ли отсутствие закрывающей угловой скобкой на первый DIV просто опечатка? –

+2

Когда Google отказывается от поддержки IE6, я могу, наконец, согласиться со всеми, кто кричал то же самое за последний год. ** Internet Explorer 6 не работает **. Поддержка Drop для него, поскольку стоимость создания сайта, который соответствует его рендерингу, намного выше вознаграждений. –

+0

@ John это выглядит правильно для меня. Является ли идентификатор отбрасывающим вас? @ Эндрю, да, но я удивлен, увидев, что браузеры на моем новом телефоне сделали то же самое, поэтому мне было интересно, насколько это «проблема». –

ответ

1

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

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

1

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

1

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

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

Так что проблема здесь это было?

 
<div id="navcontainer"<ul> 
<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="navcontainer"><ul> 
<li><a href="">Home</a></li> 
<li><a href="">Projects<a href="" id="current">Resume/a></li> 
<li><a href="">Referances<a href="">Fun
Смежные вопросы