为什么某个CSS效果在另一台计算机上不起作用

Question

我使用了一个相对简单的悬停效果，在将鼠标悬停在桌子上时弹出一个小的文本气泡。

这是在我们的 Zendesk 帮助中心。

在我同事的计算机上，它根本没有出现。

这不可能是版本问题，因为我们都可以访问文章的相同已发布版本。另外，其他人也能够看到这一点。

我们都使用相同的浏览器(Chrome(。

对此有什么解释吗？

.tooltip {
}
.tooltip .tooltiptext {
visibility: hidden;
width: 600px;
background-color: black;
color: #fff;
font-size:16px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: fixed;
z-index: 1;
margin-bottom:-200px;


}
.tooltip:hover .tooltiptext {
visibility: visible;


}

<table class="tooltip" style="height: 409px; border-color: black; width: 696px;" border="1px">
<thead>
<tr style="background-color: lightgrey; height: 19px;">
<td style="width: 229px; height: 19px;"><span class="wysiwyg-font-size-medium"><strong>1</strong></span></td>
<td style="width: 222px; height: 19px;"><span class="wysiwyg-font-size-medium"><strong>2</strong></span></td>
<td style="width: 239px; height: 19px;"><span class="wysiwyg-font-size-medium"><strong>3</strong></span>
<div class="tooltiptext">popup text </div>
</td>
</tr>
</thead>
<tbody>
<tr style="height: 93px;">
<td style="width: 229px; height: 93px;"><span class="wysiwyg-font-size-large"> x</span></td>
<td style="width: 222px; height: 93px;"><span class="wysiwyg-font-size-large"> y</span></td>
<td style="width: 239px; height: 93px;">
</td>
</tr>
</tbody>
</table>

Answer 1

这可能是缓存问题。

检查其计算机上的 Chrome 开发工具，以确保您的 CSS 和 HTML 版本已传递到他们的浏览器。硬刷新 (Ctrl+F5( 或使用开发工具在没有缓存的情况下重新加载。