仅 Firefox 中的 div 翻转位置问题，...奇怪答案

【问题标题】：div rollover position problem in Firefox only,...weird仅 Firefox 中的 div 翻转位置问题，...奇怪
【发布时间】：2011-02-08 09:54:34
【问题描述】：

我完全不知道为什么这个翻转内容仅在 FireFox 中显示不正确。

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

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

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

我不明白 Javascript 是如何移动 div 的？

如果有任何帮助，我将不胜感激！，谢谢

【问题讨论】：

标签： javascript jquery css firefox positioning

【解决方案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;

让我知道这是否有效。

【讨论】：

@user543551：不客气。如果你觉得它有用，你应该接受它;-)