29

我正在使用表格来显示我的动态生成的数据，具体取决于用户输入，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 上，图像应该会出现脉冲（缩放效果）。

  • 当用户悬停时，它应该进入以前的状态。（正常大小）

上面已经给出了表结构。

4

5 回答 5

41

表格单元格的定位是有问题的。通常的解决方案是保留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 中起作用。

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

于 2012-04-22T11:18:40.950 回答
8

我查看了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，正如您从标记中看到的那样，这再简单不过了！

带有表格中图像的缩放 Div 的 jsFiddle 演示

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

编辑： jsFiddle 现在每个更新都需要 CSS 样式的td标记。position:relative

于 2012-06-08T07:52:11.397 回答
4

我解决了添加的问题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>
于 2015-10-19T21:40:41.000 回答
3

您必须在表 1 中添加 2 个 divposition:relative和 2nd withposition:absolute

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

你的问题将得到解决检查小提琴

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

于 2012-06-13T07:56:26.473 回答
0

我有一个类似的问题。我将有问题的绝对 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>
于 2013-02-21T01:30:23.537 回答