我尝试悬停以在 Windows 7 的 Safari 中弹出工具提示，但未成功。它适用于 Chrome、IE 9、Firefox 和 Opera（所有最新版本）。如果我注释掉几行 CSS，我可以在 Safari 中弹出工具提示，尽管我想要的“淡入”效果也会消失——但它可以工作。（我在下面指出了注释掉的块行）。谁能帮我理解 1. 如何解决这个问题？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;
}
