在 td 中定位 div 绝对值在 Firefox 中不起作用答案

【问题标题】：Positioning div absolute inside td does not work in firefox在 td 中定位 div 绝对值在 Firefox 中不起作用
【发布时间】：2013-11-14 23:13:46
【问题描述】：

我正在使用 jquery draggable 将内容拖放到作为编辑器一部分的表格单元格上。我们允许用户直接将内容拖放到相应的 td 中，并使用模板来创建打印和电子邮件。

每当用户拖过编辑器的表格单元格时，就会显示一个带有替换拆分和添加选项的 div。

我在悬停的 td 中附加了这个 div。

  <tr>           
    <td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
          <h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
          <br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
         <div class="contentdiv" style="position: absolute;">
            This will show options replace/split/add new 
         </div>
    </td>    
   </tr>

问题是这个 div 的绝对位置在 Firefox 中不起作用。

而且我无法将 td 的内容包含在其他具有相对位置的 div 中，如建议的 Here 和 Here。这样做的原因是我不确定 td 的 dom 有多复杂，因为我们允许用户完全自定义其中的内容。

Link To Fiddle

虽然在 Chrome 中完美运行。还有其他解决方案吗？？

【问题讨论】：

Firefox ignores absolute positioning in table cells的可能重复
我已经提到，包装 div 不是我正在寻找的解决方案。
尝试将 float:left 添加到您的 td 元素。

标签： javascript jquery html css firefox

【解决方案1】：

不要使用<table> <tr> <td> </td></tr> </table>，而是尝试将div设计成表格。

供您参考http://snook.ca/archives/html_and_css/getting_your_di。在此尝试您的代码之后，它可能会对您有所帮助。

将 div 设计为表格是最好的方法。这也可以用于响应式设计。

【讨论】：

整个编辑器的设计允许用户创建和设计模板。我不能简单地继续进行更改。这很好地破坏了整个现有功能（例如添加行/列/使用 radcontrols 等）
检查我更新了你的小提琴。看到这是按照我的另一个答案工作的。 jsfiddle.net/qfquj/69.

【解决方案2】：

<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
    <h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br>            <br>            <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
        <div class="contentdiv"> </div>

        </td>

您已将绝对位置指定给<div class="contentdiv"> </div>

为此删除绝对位置并将<h1> 的绝对位置添加到<div class="contentdiv"> </div> 的上方。

我已经检查过了。它运行良好。

http://jsfiddle.net/qfquj/69/

The following are I modified.

    removed absolute position for 

.contentdiv{
    height:200px;
    width:300px;
    background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
    color: black;
    background-size: 100% 100%;
    text-align: center;

    top:0;
    opacity:.6

 }

    and added inline css for h1

     <h1 style="position:absolute;">

【讨论】：

【解决方案3】：

这里是您问题的答案。希望对您有所帮助。

http://jsfiddle.net/qfquj/73/

我修改的是，

Removed top:0  and added float:left

.contentdiv{
    height:200px;
    width:300px;
    background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
    color: black;
    background-size: 100% 100%;
    text-align: center;
    position:absolute;

    opacity:0.6;
    float:left;  
 }

Added inline css float left for <h1>
<h1 style="float:left">

【讨论】：

【解决方案4】：

每当涉及表格或display: table-cell 时，Firefox 都会出现绝对定位问题，它会忽略作为相对父级的表格单元格。

这是一个 13 岁的 Gecko bug。

您可以通过从表格结构恢复并在单元格上使用 display: inline-block 来解决此问题，例如，或者在表格单元格周围放置另一个相对 div。

【讨论】：