Javascript 在firefox中，在td中定位div absolute不起作用

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

每当用户拖动编辑器的表格单元格时，就会显示一个div，其中包含替换split和add的选项

我将这个div附加到悬停td中

  <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的内容封装在其他具有建议和相对位置的分区中。原因是我不确定td的dom有多复杂，因为我们允许用户完全自定义其中的内容

但在Chrome中工作得非常完美。任何其他解决方案人员都可以尝试将div设计为一个表，而不是使用

供你参考。在此之后，请尝试您的代码，它可能会对您有所帮助

将div设计为表是最佳方法。这也可用于响应性设计。

不要使用

，而是尝试将div设计为一个表

<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设计为表是最佳方法。这也可用于响应性设计。

<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>

您已将绝对位置指定给

删除此项的绝对位置，并添加位于

上方的

的绝对位置

我查过了。它工作得很好

我修改了以下内容。
删除的绝对位置
.contentdiv{
高度：200px；
宽度：300px；
背景：url（'http://i.stack.imgur.com/2LvR1.jpg")不重复;；
颜色：黑色；
背景大小：100%100%；
文本对齐：居中；
排名：0；
不透明度：.6
}
并为h1添加了内联css

您已将绝对位置指定给

删除此项的绝对位置，并添加位于

上方的

的绝对位置

我查过了。它工作得很好

我修改了以下内容。
删除的绝对位置
.contentdiv{
高度：200px；
宽度：300px；
背景：url（'http://i.stack.imgur.com/2LvR1.jpg")不重复;；
颜色：黑色；
背景大小：100%100%；
文本对齐：居中；
排名：0；
不透明度：.6
}
并为h1添加了内联css

以下是您问题的答案。我希望这能对你有所帮助

我修改的是

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">

删除了顶部：0，添加了浮动：左侧
.contentdiv{
高度：200px；
宽度：300px；
背景：url（'http://i.stack.imgur.com/2LvR1.jpg")不重复;；
颜色：黑色；
背景大小：100%100%；
文本对齐：居中；
位置：绝对位置；
不透明度：0.6；
浮动：左；
}
添加了内联css左浮动

以下是您问题的答案。我希望这能对你有所帮助

我修改的是

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">

删除了顶部：0，添加了浮动：左侧
.contentdiv{
高度：200px；
宽度：300px；
背景：url（'http://i.stack.imgur.com/2LvR1.jpg")不重复;；
颜色：黑色；
背景大小：100%100%；
文本对齐：居中；
位置：绝对位置；
不透明度：0.6；
浮动：左；
}
添加了内联css左浮动

Firefox在涉及表格或显示时存在绝对定位问题：表格单元格，它将忽略作为相对父项的表格单元格

是个13岁的孩子

---

您可以通过从表格结构恢复，例如在单元格上使用

display:inline block

，或在表格单元格周围放置另一个相对div来解决此问题。

无论何时涉及表格或

display:table cell

，Firefox都会出现绝对定位问题，其中，它将忽略作为相对父级的表单元格

是个13岁的孩子

---

您可以通过从表格结构还原并在单元格上使用

display:inline block

来修复此问题，或者在表单元格周围放置另一个相对div。

可能重复我已经提到的换行div不是我要寻找的解决方案。尝试将float:left添加到td元素。可能重复我已经提到的换行div不是我要寻找的解决方案。尝试将float:left添加到td元素元素。整个编辑器的设计方式允许用户创建和设计模板。我不能简单地去做改变。这很好地阻止了整个现有功能（如添加行/列/使用radcontrols等）检查I'v更新您的小提琴。看，这是根据我的另一个答案。整个编辑器的设计方式允许用户创建和设计模板。我不能简单地去做改变。这很好地阻止了整个现有功能（如添加行/列/使用radcontrols等）检查I'v更新您的小提琴。看，这是根据我的另一个答案。