在IE8中消失的背景圖像

我有一些按鈕翻轉在IE瀏覽器以外的瀏覽器中正常工作。我沒有使用JQuery，這不是IE6 - 我還沒有在IE6中測試過它。它在IE8中。在IE8中消失的背景圖像

你可以看到這裏發生了什麼（看看它在IE與火狐）：

http://www.brighttext.com/socialtech/index.html

我使用的是一個展示的技術或另一個按鈕響應側翻通過改變背景位置。我已經嘗試過爲IE6問題提出的各種解決方案，但沒有任何工作。任何人都可以看到這裏發生了什麼？爲什麼我們可以在IE中看到Home按鈕，而不是其他人？

代碼：

<ul> 
    <li id="homeLink" class="ord"><a href="index.html">Home</a></li> 
    <li id="faqLink" class="current"><a href="faq.html">FAQ</a></li> 
    <li id="speakersLink" class="ord"><a href="speakers.html">Speaker Info</a></li> 
    <li id="sponsorsLink" class="ord"><a href="sponsors.html">Sponsor Info</a></li> 
    </ul>

CSS的前兩個按鈕（我沒有這四個）的股利，這就是所謂mastheadLeft內：

#mastheadLeft li#homeLink a { 
     height: 32px; 
     width: 86px; 
     display: block; 
     text-indent: -1000em; 
     background: url(../images/home_dual.jpg) no-repeat left top ; 
     border: none; 
    } 

    #mastheadLeft li#homeLink.current a { 
     background-position: left top; 
    } 

    #mastheadLeft li#homeLink.current a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#homeLink.ord a { 
     background-position: left bottom; 
    } 

    #mastheadLeft li#homeLink.ord a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink a { 
     height: 34px; 
     width: 75px; 
     display: block; 
     text-indent: -1000em; 
     background: url(../images/faq_dual.jpg) no-repeat left bottom; 
     border: none; 
    } 


    #mastheadLeft li#faqLink.current a { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink.current a:hover { 
     background-position: left top; 
    } 

    #mastheadLeft li#faqLink.ord a { 
     background-position: left bottom; 
    } 

    #mastheadLeft li#faqLink.ord a:hover { 
     background-position: left top; 
    }

來源

2009-11-02 David

我已經嘗試了很多包括重新創建項目（從給定網站複製並粘貼源代碼和CSS）。使用我自己的圖片我的身邊，它完美的作品在IE 8和Firefox 3

兩個，但是我在這兩種瀏覽器試圖

http://www.brighttext.com/socialtech/images/faq_dual.jpg

。它在Firefox中打開圖像，但在IE 8中打開一個不可用的圖像。所以，也許你應該看看你的圖像存儲在哪裏。就像我說的那樣，用我的測試圖像，它似乎完美地工作。

來源

2009-11-02 07:50:15 Kamal

卡邁勒嗨，首先，萬分感謝您抽出時間做你做了什麼！第二 - 我剛剛確認你的測試。沒有顯示的三個圖像都不會在IE中打開！那麼，至少可以簡化問題，因爲我們知道，即使刪除了所有的CSS，IE也沒有看到圖像。爲什麼會這樣，我不知道。我們知道，因爲Firefox看到它們，圖像就在那裏。我會嘗試一些其他的測試......可能會將圖像文件移動到與html頁面相同的文件夾中......儘管這不是必需的。 – David

是否有原因的一些圖像是PNG和一些JPG？我很好奇，如果缺少文件問題與文件類型有關。可能不會，但我很感興趣。

此外，當我在這樣的錨標籤做背景圖像，該圖像具有無懸停半坐在懸停半的頂部，做我的CSS是這樣的：

#mastheadLeft li a { 
     height: 34px; 
     display: block; 
     text-indent: -1000em; 
     border: none; 
    } 

    #mastheadLeft li a:hover, #mastheadLeft li.current a { 
     background-position:0 -34px; 
    } 

    #homeLink a { 
     width: 86px; 
     background: url(/images/home_dual.jpg) no-repeat; 
    } 

    #faqLink a { 
     width: 75px; 
     background: url(/images/faq_dual.jpg) no-repeat; 
    }

這使得CSS很多更清潔，併爲所有元素設置完全相同的規則，除了唯一的規則，在這種情況下，只是使用的背景圖像和寬度。這樣，如果出現問題，所有圖像都會出錯。

我也使用精確像素，而不是取決於CSS中的通用「頂部」，「左側」等值。更精確的控制。

也許不是最終答案，但至少它會清理你的CSS，因此更容易找到問題。

來源

2009-11-03 19:22:35 JoshMock