我找到了完整的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;
}
最佳答案
Firefox将悬停图像放置在与IE,Chrome和Safari不同的位置时,我遇到了类似的问题。
我专门为Firefox更改了CSS:
/*Firefox*/
@-moz-document url-prefix()
{
a.enlarge:hover span{top: 250px; left: 20px;}
}
而对于其他浏览器,我使用的是top:-200px