仅在 Firefox 中出现 div 翻转位置问题，...很奇怪

Question

我完全困惑为什么这个滚动内容仅在 FireFox 中显示不正确。

我有一页充满了产品的拇指。当用户将鼠标悬停在产品拇指上时，一些信息文本会淡入。所有标准内容我都使用 jQuery 来执行此操作。这在 Safari 和 Chrome 中工作正常，但在 Firefox 中，淡入的信息（带有 .tooltip 类的锚标记）显示在错误的位置。

如果我进入样式表并将此工具提示内容从 display:none 设置为 display:block，它将在 Firefox 中正确显示。

http://www.tomcarden.net/birdy2/rollover-ts-tomcarden .net.html

我不明白 Javascript 如何移动 div？

如果您对此有任何帮助，我将非常感激！谢谢

Answer 1

以后，请提供您问题中的相关代码和html，这样我们就不用再去您的网站上搜索了。

这是您现在拥有的 HTML：

<div id="product-11" class="product grid f-cell"> 
    <a href="/product/k-mock-prod-11" title="View k mock prod #11" class="product-a"> 
        <img class="products-img-thumb" src="img/prod-11_thumb.jpg" alt="Image of k mock prod #11" />
</a> 

    <a href="/product/k-mock-prod-11"  class="tooltip"> 
        <span class="products-page-text"> 
        K mock prod #11
        <p>Lorem ipsum dollor etc. 
        <br/>Size: 10.75"w x 9.25"d x 4.75"h</p> 
        </span> 
    </a> 
</div>

JavaScript 在这里基本上无关紧要。

据我所知，这个问题与您在 .product 项目中定位 .tooltip 锚点的方式有关。不要按照现在的方式进行操作，而是将其添加到您的 .product 或 .grid 或 .f-cell 类中（我'我不确定您主要用于产品 div）：

position:relative;

那么您应该删除 .tooltip 类中的边距声明并添加以下内容：

position:absolute;
bottom:0;
left:0;

让我知道这是否有效。