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在这里基本上无关紧要。

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

position:relative;

然后你应该删除}类中的保证金声明并添加：

.tooltip

如果有效，请告诉我。

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

1 个答案: