Question

我正在使用适用于FF，Chrome和IE7-8的工具提示，但在IE6中它不会出现。你可以转到这个页面http://www.avaline.com/ Bags / Eco-Friendly-Bags / R1500并使用test2@gmail.com密码登录：test02，然后点击“添加到购物车”按钮并将鼠标悬停在问号上以查看（或者没有看到工具提示。

这是相关的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>

Answer 1

这里只是一个建议。可能想尝试qTip。这是一个非常棒的jQuery插件。

qTip

Answer 2

嗯...也许可以尝试将class=tooltip更改为class="tooltip"？我不知道您使用的是什么DOCTYPE，但未加引号的属性可能会导致问题......

编辑：做了一些研究，试试这个：

替换

A.tooltip:hover SPAN

与

A.tooltip:link:hover SPAN

Answer 3

首先这样做：

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;
}

Answer 4

这永远不会按原样运作。考虑这两个规则：

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

并问自己：如果没有显示跨度，你怎么能将鼠标悬停在它上面？

Answer 5

一些实用技巧（我登录并测试了其中一些）：

将zoom:1添加到范围和A标记的CSS。
默认情况下，定位范围relative。

此外，跨度上的背景是透明的，因此您在CSS中有错误或者某些内容未被正确声明。

亲爱的，祝你好运！

IE6 CSS工具提示没有出现

5 个答案: