html - firefox 在相对容器问题中的绝对位置

Question

我正在使用表格来显示我动态生成的数据，具体取决于用户输入，html 结构如下所示:

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> //like this i set for all td in table
     <div style="position:absolute">//like this i set for all div in table
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>

这里的 div 位于 body 的上角。以上所有样式都通过 javascript 应用，并且它在 chrome、IE 中运行良好，但在 FF 中却不像下图那样。

如果我们将 div 的位置从绝对位置更改为相对位置，它会正确对齐，但当用户悬停 div 时我会产生悬停效果，因为位置很重要，这个问题只发生在 firefox 中

为了快速引用，请查看 jquery http://www.malsup.com/jquery/hoverpulse/

我需要像这样必须在 FIREFOX 的表内实现，这意味着

• 每张图片放在一个td里面 //<td style="position:relative;">

• 如果用户将鼠标悬停在 td 上，图像应该呈脉冲状(缩放效果)。

• 当用户将鼠标悬停在外时，它应该会转到之前的状态。(正常大小)

上面已经给出了表结构。

Answer 1

表格单元格的定位有问题。通常的解决方案是单独保留 td 的样式，并在其中放置一个 div，您将其设置为 position:relative。然后将内容放在该 div 中。

<td> <!-- no style at all -->
 <div style="position:relative;">
  <div style="position:absolute"> <!-- original div -->
   <contents>
  </div>
 </div>
</td>

编辑:
我不知道你想要哪种效果，但这里有一个 jsFiddle 演示了这个问题:http://jsfiddle.net/ygP7k/5/
它有一个表格，每个表格单元格中几乎没有绝对定位的 div，应该与右下角对齐。它适用于除 Mozilla 之外的所有浏览器。

但是这里有一个更新的，带有我提到的额外 div:http://jsfiddle.net/ygP7k/7/
它的工作原理完全相同，只是它在 Firefox 中也有同样的作用。

你能用这个吗？这是否回答了您的问题？