0

Windows 7 の Safari でホバーしてツールチップをポップアップしようとして失敗しました。Chrome、IE 9、Firefox、および Opera (すべての最新バージョン) で動作します。必要な「フェードイン」効果も消えますが、CSS の数行をコメントアウトすると、Safari でポップアップするツールチップを取得できますが、機能します。(コメントアウトされたブロック行を以下に示します)。1.これを修正するにはどうすればよいですか? 2. 2 つの Webkit ブラウザーの動作が異なるのはなぜですか?

コードは次のとおりです (最初に HTML 部分、次に CSS 部分)。

HTML (関連部分):

    <div class="mycontainer">
       <div class="myblock has-tooltip">Content I can hover over<span  class="tooltip">content in tooltip popup</span></div>
    </div>

CSS（該当部分）：

.has-tooltip {
cursor: help;
font-family: "Gill Sans", Impact, sans-serif; 
font-size: 20px; */
margin: 20px 75px 10px 45px;
padding: 0.5em;
position: relative;
text-transform: uppercase;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */

}

.has-tooltip .tooltip {
background: #FF6600;
bottom: 100%;
color: #fff;
font-size: 0.8em;
font-weight:100;
display: block;
left: -1em;
margin-bottom: 0.6em;
opacity: 0;
padding: 1em;
position: absolute;
visibility: hidden;
width: 140%; 

-webkit-transform: translateX(0px) translateY(10px);
   -moz-transform: translateX(0px) translateY(10px);
    -ms-transform: translateX(0px) translateY(10px);
     -o-transform: translateX(0px) translateY(10px);
        transform: translateX(0px) translateY(10px);

/* 注: このブロックを下にコメントすると、Safari にもツールチップが表示されます */

  -webkit-transition: all 1s ease-out;
   -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
     -o-transition: all 1s ease-out;
        transition: all 1s ease-out;

/* 注: このブロックの上にコメントすると、ツールチップに SAFARI TOO が表示されます */

-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.has-tooltip .tooltip:before {
bottom: -1em;
content: " ";
display: block;
height: 1em;
left: 0;
position: absolute;
width: 100%;

} 

/* CSS Triangles - see Trevor's post */
.has-tooltip .tooltip:after {
border-left: solid transparent 0.5em;
border-right: solid transparent 0.5em;
border-top: solid #FF6600 0.5em;
bottom: -0.5em;
content: " ";
height: 0;
left: 50%;
margin-left: -1em;
position: absolute;
width: 0;

}

.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible; 
-webkit-transform: translateX(0px) translateY(0px) !important;
   -moz-transform: translateX(0px) translateY(0px) !important;
    -ms-transform: translateX(0px) translateY(0px) !important;
     -o-transform: translateX(0px) translateY(0px) !important;
        transform: translateX(0px) translateY(0px) !important; 
}
4

1 に答える 1

0

あなたのコード (あなたが示した部分を含む) は、Mountain Lion の Safari 6.0.2 でうまく動作します。http://i.imgur.com/YyNsQ09.png

于 2013-02-28T00:33:06.033 に答える