Firefox 中的 CSS 工具提示悬停位置问题答案

【问题标题】：CSS tooltip hovering position issue in FirefoxFirefox 中的 CSS 工具提示悬停位置问题
【发布时间】：2013-01-12 06:29:12
【问题描述】：

我找到了一个可在新网站中使用的完整 CSS 工具提示。它在 Safari 和 Chrome 中完美运行。但仅在 Firefox 中，无论链接在页面上的哪个位置，工具提示都会一直悬停在 DIV 的最左侧。

我在这个网站上发现这个问题非常接近，但没有给我所需的答案。 CSS Tooltip hovering position issue

它会在 Firefox 中出现错误，还是我需要专门为 Firefox 添加额外的代码？

我确实根据设置规则确保相对和绝对定位是正确的。我对这一切还是很陌生。因此，我们将不胜感激。

谢谢。

这是我的代码：

a.tip2 {
position: relative;
text-decoration: none;
}

a.tip2 span {display: none;}

a.tip2:hover span {
display: block;
position: absolute; 
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
background: rgba(0,0,0,.8);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;    
color: #fff;
font-size: .86em;
}

a.tip2:hover span:after {
position: absolute;
display: block;
content: "";  
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -20px;
left:1em;
}

【问题讨论】：

你有一个我们可以看到它的例子吗？试试jsFiddle。
您是否尝试将左侧元素设置为 a.tip2:hover span css？我相信 Firefox 至少需要两个位置声明（顶部或底部和左侧或右侧）才能正常工作
animuson - 不幸的是，我没有。
LifeInTheGrey - 成功了！！！太感谢了。下次我会记住这个要求。非常感谢您的帮助。

标签： css firefox hover position tooltip

【解决方案1】：

我在 Firefox 将悬停图像定位在与 IE、Chrome 和 Safari 不同的位置时遇到了类似的问题。

我专门为 Firefox 更改了 css：

/*Firefox*/
@-moz-document url-prefix()
{
a.enlarge:hover span{top: 250px; left: 20px;}
}

而对于我使用的其他浏览器顶部：-200px

【讨论】：