-webkit-transform(悬停工具提示)不能在Safari (Windows 7)中工作，但可以在Chrome

Question

我试图在Windows 7的Safari中获得悬停弹出工具提示，但没有成功。它适用于Chrome, ie9, Firefox和Opera(所有最新版本)。如果我注释掉几行CSS，我可以让工具提示在Safari中弹出，尽管我想要的"渐入"效果也消失了——但它是有效的。(我在下面指出了注释掉的块行)。有人能帮我理解吗?如何解决这个问题?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 */

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

Answer 1

您的代码(包括您指出的部分)在Mountain Lion上的Safari 6.0.2中工作得很好。https://i.stack.imgur.com/oCRoT.png