IE不尊重：

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

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

但是，在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瀏覽器中工作的任何想法？

來源

2012-03-22 Yazmin

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

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

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

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

來源

2012-03-22 16:35:57

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

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

如果您正在使用IE6不支持：通過使用javascript

onmouseover 
onmouseout

事件上的任何元素懸停除了

<a>

我周圍有得到。

來源

2012-03-22 16:10:13

不正確。 IE支持所有元素上的'：hover'。除了''標籤外，IE6不支持'：hover'。 IE6支持的所有版本：很好地懸停。 – easwee 2012-03-22 16:12:09

感謝easwee的澄清。我更新了我的措辭。 – 2012-03-22 16:15:40

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

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

來源

2012-03-22 16:11:31

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

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

我已經有同樣的問題，我已經用解決這個問題：

#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）。

來源

2013-06-05 14:25:10

回答

相關問題