2010-02-05 6 views
0

J'ai une liste liée horizontale (implémentée pour ressembler à des onglets) que j'utilise pour une navigation de site.Compatibilité du navigateur de navigation du lien CSS

J'ai vérifié ma page aujourd'hui sur mon téléphone et elle ne s'affichait pas correctement sur Opera ou Internet Explorer. J'ai vérifié Internet Explorer 6 quand je suis rentré à la maison, et il semble la même chose.

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

Quelle est la meilleure façon de changer cette façon, il est compatible navigateur plus?

+0

est l'absence d'un support d'angle de fermeture sur la première div juste une faute de frappe? –

+2

Avec Google abandonnant le support pour IE6, je peux enfin être d'accord avec tout le monde qui a crié la même chose pour la dernière année. ** Internet Explorer 6 est mort **. Abandonnez le support car le coût de construction d'un site conforme à son rendu est beaucoup plus élevé que les récompenses. –

+0

@ John ça me semble correct. Est-ce que l'ID vous rejette? @ Andrew, ouais, mais je suis surpris de voir que les navigateurs de mon nouveau téléphone ont fait la même chose, alors je me demandais à quel point c'est un «problème». –

Répondre

1

IE6 n'aime pas beaucoup display:inline. Essayez float:left à la fois sur votre li et votre li a.

En outre, IE6 ne prend pas en charge le sélecteur d'enfant >.

1

D'une part, Internet Explorer 6 ne prend pas en charge le sélecteur d'enfant immédiat (>) que vous utilisez.

1

Pour les articles li vous devez définir:

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

Le problème ici était-ce?

 
<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

qui devrait être

 
<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
Questions connexes