2012-03-22 159 views
6

以下網站上的工作元素上懸停:http://cetcolor.comIE不尊重:

桅頂的圖形與「閱讀它」按鈕與懸停定位鏈接,當在顯示器推出的橙色按鈕圖形,是一個可點擊的鏈接。

但是,在IE瀏覽器中它不起作用。

這裏是受影響的HTML:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div> 

這裏是引用CSS:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
} 

有沒有人有,爲什麼懸停沒有在IE瀏覽器中工作的任何想法?

+1

一個原因可能是您有一個空的鏈接。嘗試在其中插入一些文本並執行「text-indent:-9999px」將其移出。 – easwee 2012-03-22 16:18:19

+0

我認爲你是對的,這個問題處理的鏈接是空的。當我將內容添加到鏈接時,它會起作用。當我在上面的第一個聲明中添加文本縮進時,它停止工作。不知道該怎麼辦... – Yazmin 2012-03-22 19:34:21

回答

9

我有一個適合您的解決方案。只需爲您的read_about_it類定義背景顏色或背景圖像即可。

你的CSS代碼/或IE中存在明顯的邏輯錯誤 - 取決於觀點。你的A標籤是空的 - 我不是說文字,而是背景(你改變懸停狀態的背景)。我們都知道IE生活在它自己的世界中,並以不同的方式處理HTML,因爲它使用古代的Trident引擎。但是,如果元素爲空(沒有背景),IE將不會更改懸停狀態的背景,因爲IE假定不需要更改或創建尚不存在的內容。
乾杯!

+1

我能夠通過在背景中添加一個透明的gif來獲得這個工作。非常感謝。 – Yazmin 2012-03-22 20:03:14

+0

不客氣!使用transperant gif是個不錯的主意。 – 2012-03-23 10:26:48

4

添加「display:block;」到它,它應該爲你工作。

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
+0

我試過了,但沒有奏效。這種模式是否特定 - 標準,鬆散? – Yazmin 2012-03-22 19:35:04

+0

「display:inline-block;」也工作 - 謝謝。 – buffjape 2014-08-03 13:59:49

3

我已經有同樣的問題,我已經用解決這個問題:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

的 「背景技術:RGBA(255,255,255,0)」 是解決這個問題的一個關鍵字。但是你想IE-7或更老,你可以把background-image:url(URL_TO_TRANSPARENT_IMAGE)。