Css -webkit转换（悬停工具提示）不适用于Safari（Windows 7），但适用于Chrome、Opera、IE 9和Firefox（均为最新版本）

在Windows7中，我尝试在Safari中使用鼠标悬停弹出工具提示，但没有成功。它适用于Chrome、IE 9、Firefox和Opera（所有最新版本）。如果我注释掉几行CSS，我可以在Safari中弹出工具提示，尽管我想要的“淡入”效果也消失了，但它确实有效。（我已在下面指出注释掉的块行）。有人能帮我理解吗。如何解决这个问题？2.为什么两个webkit浏览器的工作方式不同

下面是代码（先是HTML部分，然后是CSS部分）

HTML（相关部分）：

}

/*注意：如果我在下面注释此块，工具提示也会显示在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; 

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

/*注意：如果我在上面注释此块，工具提示也会显示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; 

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

}

}

}

---

您的代码（包括您指出的部分）在《山狮》上的Safari 6.0.2中运行良好

这是针对Windows的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; 
}