IE6 CSS工具提示未出現

我使用的工具提示可在FF，Chrome和IE7-8中使用，但在IE6中未顯示。您可以轉到本頁http://www.avaline.com/箱包/環保袋/ R1500並使用[email protected]登錄密碼：test02，然後點擊「添加到購物車」按鈕並將鼠標懸停在問號上以查看（或未查看）工具提示。IE6 CSS工具提示未出現

這是相關的HTML和CSS：

<DIV class="oewBox" id="oewImpLocDiv" style="BACKGROUND-IMAGE: url(/images/img/org4.gif)"> 
<A class="tooltip" href="#"><SPAN class=""><STRONG>More than 2 imprint locations?</STRONG> Test </SPAN></A> 
</DIV> 

<style> 
/* Rule from element "style" attribute */ 
element.style { 
    BACKGROUND-IMAGE: url(/images/img/org4.gif) 
} 
/* Rule N°8 from inline stylesheet */ 
.oewBox { 
    PADDING-RIGHT: 8px; 
    PADDING-LEFT: 40px; 
    PADDING-BOTTOM: 16px; 
    MARGIN: 0px 0px 6px; 
    PADDING-TOP: 6px; 
    BORDER-BOTTOM: #ff7c14 3px solid 
} 
/* Rule N°7 from inline stylesheet */ 
.oewBox { 
    BACKGROUND-POSITION: 0px 0px; 
    BACKGROUND-IMAGE: none; 
    BACKGROUND-REPEAT: no-repeat 
} 
/* Rule N°11 from /site/av-files/mainstyles.css */ 
A:active { 
    COLOR: #3b88c4; 
    TEXT-DECORATION: none 
} 
/* Rule N°10 from /site/av-files/mainstyles.css */ 
A:hover { 
    COLOR: #000; 
    TEXT-DECORATION: none 
} 
/* Rule N°9 from /site/av-files/mainstyles.css */ 
A:visited { 
    COLOR: #3b88c4; 
    TEXT-DECORATION: underline 
} 
/* Rule N°8 from /site/av-files/mainstyles.css */ 
A:link { 
    COLOR: #3b88c4; 
    TEXT-DECORATION: underline 
} 
/* Rule N°7 from /site/av-files/mainstyles.css */ 
A { 
    COLOR: #3b88c4; 
    TEXT-DECORATION: underline 
} 
/* Rule N°52 from inline stylesheet */ 
A.tooltip { 
    BACKGROUND: url(/images/img/question.gif) no-repeat; 
    FLOAT: right; 
    WIDTH: 19px; 
    HEIGHT: 20px 
} 
/* Rule N°54 from inline stylesheet */ 
A.tooltip:hover SPAN { 
    BORDER-RIGHT: #ff7c14 1px solid; 
    BORDER-TOP: #ff7c14 1px solid; 
    DISPLAY: inline; 
    BACKGROUND: #ffffff; 
    BORDER-LEFT: #ff7c14 1px solid; 
    COLOR: #000; 
    BORDER-BOTTOM: #ff7c14 1px solid; 
    POSITION: absolute 
} 
/* Rule N°53 from inline stylesheet */ 
A.tooltip SPAN { 
    PADDING-RIGHT: 3px; 
    DISPLAY: none; 
    PADDING-LEFT: 3px; 
    FONT-WEIGHT: normal; 
    FONT-SIZE: 11px; 
    PADDING-BOTTOM: 2px; 
    MARGIN-LEFT: -245px; 
    WIDTH: 230px; 
    PADDING-TOP: 2px 
} 
</style>

來源

2010-04-06 Lauren

正如一個警告：確保您的所有安全頁面（https）都使用https引用所有圖像，否則您將在IE中看到這些令人討厭的安全警告。 – mattbasta 2010-04-08 03:41:54

我想我只需修復Truste圖像。另外，我在IE6中固定了大部分的工具提示，但是現在我選擇的元素是戳穿應該是我的頂層a.tooltip：hover span元素。我通過將頂層元素放入表中來解決了類似的問題，但我仍然不明白爲什麼這會起作用，我寧願不必訴諸表格。我嘗試了z-index：999（聲明瞭位置），但失敗了。這是令人尷尬的令人沮喪。嘿嘿。 – Lauren 2010-04-08 17:32:35

爲了解決這個問題，我回到了這裏：http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/，相應地調整了一些值，並添加了一個a。工具提示：懸停選擇器。應用於形成像SELECT這樣的元素的無用z-index是一個我現在應該可以修復的bug，儘管我真的希望我不必使用javascript來實現。嘿嘿。我想我必須，或者使用一個iframe或表格（因爲之前爲我工作，雖然我沒有看到它在網上提到） – Lauren 2010-04-08 18:12:56

就在這裏建議。可能想嘗試qTip。這是一個jQuery插件，效果很好。

qTip

來源

2010-04-06 15:27:27 Alex

我很想...我試圖儘量減少Javascript的數量（和Javascript框架）的使用，雖然我可以。 – Lauren 2010-04-06 15:40:44

嗯......也許嘗試改變class=tooltip到class="tooltip"？我不知道你用的是什麼DOCTYPE，但不帶引號的屬性，可能會導致一個問題...

編輯：做了一些更多的研究，嘗試這個辦法：

更換

A.tooltip:hover SPAN

與

A.tooltip:link:hover SPAN

來源

2010-04-06 15:31:58

引號是在每個類和id的周圍，但是當我從IETester複製時，它們被切掉。我解決了上述問題。 – Lauren 2010-04-06 15:48:29

編輯我的答案... – 2010-04-06 16:08:42

組合的僞類也沒有工作。 – Lauren 2010-04-06 18:12:35

首先做到這一點：

add an HREF to your A. href="#" or something

我也將實現這樣的提示：

a.tooltip:hover span { 
    background:none repeat scroll 0 0 #FFFFFF; 
    border:1px solid #FF7C14; 
    color:#000000; 
    display:block; 
    position:absolute; 
    top: 0; 
    left: -245px; 
} 

a.tooltip { 
    background:url("/images/img/question.gif") no-repeat scroll 0 0 transparent; 
    float:right; 
    height:20px; 
    width:19px; 
    position: relative; 
} 

a.tooltip span { 
    display:none; 
    font-size:11px; 
    font-weight:normal; 
    padding:2px 3px; 
    width:230px; 
}

來源

2010-04-06 17:42:11 vinhboy

我嘗試了你的CSS，但它也沒有工作。我也嘗試設置跨度的z-index（使用懸停和不使用），當沒有工作時，我從a.tooltip中刪除「float：right」，並用「padding-left：40px; padding-頂部：40像素;顯示：塊;」努力使其在沒有浮動的情況下可見。工具提示仍然沒有顯示，所以我想浮動不是問題的根源。 – Lauren 2010-04-06 18:11:42

將HREF添加到您的A. href =「＃」或其他內容。 – vinhboy 2010-04-06 18:27:45

這是從來沒有去上班原樣。考慮這兩條規則：

A.tooltip:hover SPAN { 
    DISPLAY: inline; 
} 
A.tooltip SPAN { 
    DISPLAY: none; 
}

並問問自己：如果跨度不顯示，你怎麼能把它盤旋呢？

來源

2010-04-07 19:32:47 graphicdivine

你錯了。這不是跨越的跨度，而是它的父母。當父級鼠標懸停時，子級元素將內聯顯示。 – mattbasta 2010-04-08 03:35:32

但跨度是父母中唯一的東西。如果沒有內容，父母會崩潰並且無法忍受。 – graphicdivine 2010-04-08 10:25:18

一些固體的提示（我登錄和測試它的一些）：

添加zoom:1的跨度和A標籤的CSS。
默認情況下，定位範圍relative。

另外，跨度上的背景是透明讀取的，所以你要麼在CSS中有錯誤，要麼沒有聲明正確的東西。

祝你好運！

來源

2010-04-08 03:47:23 mattbasta

IE6 CSS工具提示未出現

回答

相關問題