Question

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

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

我将此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的内容包含在具有相对位置的其他div中，如建议的Here和Here。这样做的原因是我不确定td的dom有多复杂，因为我们允许用户完全自定义其中的内容。

Link To Fiddle

虽然在Chrome中完美运行。任何其他解决方案的家伙??

Answer 1

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

供您参考http://snook.ca/archives/html_and_css/getting_your_di。在尝试完代码后，它可能会帮助您。

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

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

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

Answer 4

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

这是一个13岁的Gecko bug。

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

将div绝对定位在td中在firefox中不起作用

4 个答案: