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中也有用.

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

Answer 2

我查看了hoverplus jQuery插件,源文件显示了使用的方法:

// parent must be relatively positioned
this.parent().css({ position: 'relative' });

// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });

由于这个插件的要求和您当前的设计需求,我建议使用.transit()jQuery插件,它具有强大且易于使用的Zoom功能,没有这些要求.

我准备了两个表格示例,每个示例都有9个Div,正如您可以通过标记看到的那样,它不容易!

jsFiddle of Zoomed Div's与图像中的图像

在您查看我为您制作的jsFiddle之后,您可以在此处的演示页面上看到所有.transit()插件功能.

编辑: jsFiddle现在需要CSS样式td标记position:relative您的更新.

Answer 3

我解决了添加的问题display: block;

.table td div {
  position:absolute;
  display:block;
}

在你的情况下：

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