1

新しいサイトで使用する完全な CSS ツールチップを見つけました。Safari と Chrome で完全に動作します。ただし、Firefox でのみ、リンクがページのどこにあるかに関係なく、ツールチップが DIV の左端に移​​動し続けます。

このサイトでこの質問を見つけましたが、これは非常に近いものでしたが、必要な答えが得られませんでした. CSS ツールチップのホバリング位置の問題

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

1 に答える 1

0

IE、Chrome、および Safari とは異なる場所にホバー画像を配置する Firefox で同様の問題が発生しました。

css を Firefox 専用に変更しました。

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

一方、私が使用している他のブラウザでは、top: -200px

于 2013-06-13T18:30:10.307 に答える