IE8 - 導航鏈接不工作

Question

嘿所有 - 我一直在儘可能地使用谷歌搜索，但我做的似乎沒有幫助。

我一直在一個網站上工作（www.philipdukes.co.uk），雖然導航似乎在FF，Safari瀏覽器，鉻，甚至IE6（奇蹟般）工作正常，在我的系統在這裏它慘敗在IE8中：導航鏈接不起作用。

我懸停在他們身上，得到翻轉動畫，但他們不是「可點擊」的。它們是基本的文本鏈接，在屏幕上與文本對齊，然後它們所代表的區域應該是可點擊的。填充空間的圖像不是鏈接。如果我刪除圖像，我可以單擊該區域，如果刪除了文本對齊，我可以單擊鏈接文本（但僅限鏈接文本）。

它的駕駛我堅果，因爲它的最後一件事，我需要完全萬物加工前進行排序...

的導航欄的代碼是在這裏：

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

和CSS樣式是此處（here任何優化也歡迎！）：

/* 
* 
* 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

你缺少：

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

這應該解決問題。當使用position:absolute時，始終設置垂直（top或bottom）和水平（left或right）放置。

UPDATE

任何時候，background設置，它開始按預期工作。通過大量測試，您可能會找到解決問題的不同方法。但是，這是我會做什麼：

BEST WAY：

1. 要麼擺脫img標籤或隱藏起來，而是運用其作爲background-image您a標籤。
2. 變化對a標籤position到relative而不是absolute，因爲它們將是父div

快速的方法

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

的唯一可見的孩子在哪裏shim.png是8-位全透明，一個像素PNG。 8位PNG墊片比相同尺寸（1像素）的gif小，並且所有東西仍然按計劃工作。

Answer 2

提供相同的樣式IE8你服務到IE7，然後把下面的元素在文檔頭：

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

這將使IE8模仿IE7。因爲您對IE7沒有任何問題，所以我認爲這會對您有用。

Answer 3

不能完全確定發生了什麼事情在那裏，但似乎是某種問題（也許一個IE8的bug）與鏈接和圖像元素的層次感。當我改變的.nav img, .nav2 img的z-index任何負值，而不是50，然後鏈接成爲點擊。

我不知道這是在這種情況下，實際的可能性，不過，因爲負的z-index可能會導致圖像不再可見。