javascript - 仅限 Firefox 中的 div 翻转位置问题，...很奇怪

Question

我完全不明白为什么滚动内容仅在 FireFox 中显示不正确。

我有一个满是产品拇指的页面。当用户将鼠标悬停在产品拇指上时，一些信息文本会淡入。所有标准的东西，我正在使用 jQuery 来执行此操作。这在 Safari 和 Chrome 中运行良好，但在 Firefox 中淡入的信息(带有 .tooltip 类的 anchor 标记)显示在错误的位置。

如果我进入样式表并将此工具提示内容从 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 anchor 的方式有关。不要像现在那样做，而是将其添加到您的 .product 或 .grid 或 .f-cell 类(我'我不确定您主要将哪个用于您的产品 div):

position:relative;

那么您应该删除 .tooltip 类中的边距声明并添加:

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

如果可行，请告诉我。