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那样在下面的图像。

enter image description here

如果我们将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插件，它具有功能强大且易于使用的缩放功能，但没有这些要求。

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

jsFiddle DEMO of Zoomed Div's with Images in Tables

在您查看我为您制作的 jsFiddle 之后，您可以在演示页HERE上看到所有 .transit（）插件功能。

编辑：根据您的更新，jsFiddle现在需要td position:relative代码的CSS样式。

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>

Answer 4

您必须在表1中添加2个div position:relative，将第2个添加到position:absolute

<td>
<div style="position:relative">
<div style="position:absolute">ddd</div>
</div>
</td>

你的问题将解决问题小提琴

http://jsfiddle.net/rizwanabbasi/2hyE8/1/

Answer 5

我有类似的问题。我把一个有问题的绝对div包装在一个绝对的div里来解决这个问题：

    <div class="thumbnail" style="..position:relative;..">  
        <div style="position:absolute;">
        <div class="thumbnail-heart" style="..position:absolute;..">
            <img src="../image.png" style="float:right;position:relative;..">
            ...
        </div>
        </div>

firefox位置绝对在一个相对容器问题里面

5 个答案: