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工具提示未出现

回答

相关问题