2013-07-26 89 views
0

我在我的網站上安裝了最新版本的Nivo Slider 3.2,它在Firefox和Chrome中運行良好,但在IE8中,鏈接不起作用。我已經搜索並嘗試了一堆的解決方案,如添加到我的CSS:Nivo Slider鏈接在IE8中不起作用

.nivoSlider a, .nivoSlider img { 
    display: block !important; 
} 

但是,這隻能滑塊的第一個圖像,圖像的其餘不鏈接到其指定的頁面。

我的網站是here,單擊 「卡車銷量」 往上頂

CSS是here

感謝您的幫助!

+0

這個產品*應該*與IE8一起使用嗎?如果是這樣,應該向作者提交錯誤報告。 – cimmanon

回答

3

這是一個已知的問題與NIVO滑塊,添加以下的CSS:

.nivoSlider a.nivo-imageLink{ 
    display:none; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-opacity:0; 
    -moz-opacity:0; 
    -khtml-opacity:0; 
    opacity: 0; 
    background-color:#fff; 
} 

.nivoSlider a.nivo-imageLink img{ 
    display:block!important; 
} 

這是因爲IE瀏覽器有問題渲染空<a>沒有背景。我已經遇到了這個時候很長一段時間以前我想在閃存元素上放置一個鏈接。給它一個背景並將不透明度設置爲0將使其正常工作而不會損害設計。

+0

嗨,這隻適用於第一個圖像,在其餘的圖像,鏈接不起作用。請嘗試:http://www.psndealer.com/dealersite/default.asp?dom=UNITEDTRUCKCENTERS,然後點擊「卡車銷售」。 –

+0

你知道在不支持它的瀏覽器上使用'console'的時候會打破javascript嗎?這可能是相關的。我給你的CSS應該適用於所有幻燈片 –

+0

什麼是控制檯?對不起,我不知道它是什麼。有沒有辦法使JavaScript或jQuery與它一起工作?如果您使用IE8打開我的網站,您會看到只有第一張幻燈片有鏈接使用您的解決方案。 –

0

這並沒有爲我工作,但我發現了另一個解決方案:

.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:6; 
    display:none; 
    background:white; 
    filter: alpha(opacity=0); 
    /other than IE/ 
    -moz-opacity:0; 
    -khtml-opacity:0; 
    opacity: 0; 
    line-height: 375px; /*Change this to the height of your image*/ 
    font-size: 0px; 
} 

.nivoSlider a.nivo-imageLink img{ 
    display:block!important; 
} 

現在添加一些文字中的每個圖像鏈接的前面:

<a href="yourlink.php">TEXT GOES HERE<img src="yourimage.jpg" alt="image" /></a> 

這是一個小哈克,但它確實訣竅。 -Cheers