IE8 - les liens de navigation ne fonctionnent pas

Question

Salut à tous - J'ai été googler autant que possible, mais rien que je fasse semble aider.

J'ai travaillé sur un site Web (www.philipdukes.co.uk), et bien que la navigation semble fonctionner correctement dans FF, Safari, chrome, même IE6 (miraculeusement), sur mon système ici il échoue lamentablement dans IE8: les liens de navigation ne fonctionnent pas. Je passe la souris dessus, j'obtiens l'animation de survol, mais ils ne sont pas "cliquables". Ce sont des liens textuels basiques, alignés sur le texte à l'écran, puis la zone qu'ils représentent doit être cliquable. L'image qui remplit l'espace n'est pas le lien. Si je supprime l'image, je peux cliquer sur la zone, et si je supprime l'alignement de texte, je peux cliquer sur le texte du lien (mais seulement le texte du lien).

Il me rend fou, comme la dernière chose que je dois trier avant everythings pleinement travail ...

Le code de la barre de navigation est ici:

<div class="navHolder"> 
    <div class="nav current-home"> 
     <div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div> 
     <div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div> 
     <div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div> 
    </div> 
    <div class="nav2 current-home"> 
     <div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div> 
     <div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div> 
     <div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div> 
    </div> 

et le style css est ici (toute optimisation est aussi le bienvenu ici!):

/* 
* 
* BEGIN NAV SECTION 
* 
*/ 
.navHolder{ 
    position: relative; 
    width: 100%; 
    height: 100px; 
    margin: 0; 
    padding: 0; 
} 
.nav, .nav2 { 
    width: 600px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
    margin: 0 auto; 
    padding: 0; 
    top: 0; 
} 
#home, #bio, #media, #press, #pdr, #contact{ 
    position: absolute; 
    top: 0px; 
    overflow: hidden; 
    width: 200px; 
    height: 50px; 
    background: url(images/nav/nav-back.png) 0 0 no-repeat; 
} 
.nav a, .nav2 a{ 
    position: absolute; 
    z-index: 100; 
    display: block; 
    top: 0px; 
    height: 50px; 
    width: 200px; 
    text-indent: -9000px; 
} 
.nav img, .nav2 img{ 
    position: relative; 
    z-index: 50; 
    width: 200px; 
    height: 50px; 
} 
#home, #press{ 
    left: 0; 
} 
#bio, #pdr{ 
    left: 200px; 
} 
#media, #contact{ 
    left: 400px; 
} 
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{ 
    background-position: 0 -246px; 
} 

Answer 1

Il vous manque:

.nav a, .nav2 a { 
    left: 0; 
} 

Cela devrait résoudre le problème. Définissez toujours un emplacement vertical (top ou bottom) et horizontal (left ou right) lorsque vous utilisez position:absolute.

MISE À JOUR

Chaque fois qu'un background est réglé, il commence à travailler comme prévu. Grâce à de nombreux tests, vous trouverez probablement une manière différente de résoudre le problème. Mais ce que je ferais:

MEILLEUR MOYEN:

1. Ou se débarrasser des img balises ou les cacher, et au lieu de les appliquer comme background-image à vos a tags.
2. Changer le position sur les balises à arelative au lieu de absolute comme ils le seraient le seul enfant visible du parent div

RAPIDE WAY

.nav a, .nav 2 { background: url(/images/shim.png) } 

Où shim.png est un 8- bit entièrement transparent, un pixel PNG. Un shim PNG 8 bits est plus petit que la même dimension (1 pixel) gif, et tout fonctionnera comme prévu.

Answer 2

Serve les mêmes styles à IE8 que vous desservez à IE7, puis mettre l'élément suivant dans la tête de document:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

Cela fera IE8 émule IE7.Parce que vous n'avez aucun problème avec IE7, je présume que cela fonctionnerait pour vous.

Answer 3

Pas tout à fait sûr de ce qui se passe là-bas, mais semble être une sorte de problème (peut-être un bug IE8) avec la superposition des éléments de lien et d'image. Quand je change le z-index de .nav img, .nav2 img à n'importe quelle valeur négative au lieu de 50, alors les liens deviennent cliquables.

Je ne suis pas sûr que ce soit une possibilité pratique dans ce cas, cependant, puisque l'index z négatif pourrait rendre les images plus visibles.