在TD中將div絕對定位在Firefox中不起作用

Question

我正在使用可拖動的jquery來拖放作為編輯器一部分的表格單元格上的內容。 我們允許用戶直接將內容拖放到相應的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中不起作用。

而且我不能在這里和這里建議的位置相對的其他div中包裝td的內容。 原因是我不確定td dom的復雜程度，因為我們允許用戶完全自定義其中的內容。

鏈接到小提琴

雖然可以在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都存在絕對定位問題display: table-cell涉及其中，它將作為相對父級忽略表單元格。

這是一個13歲的壁虎臭蟲 。

您可以通過從表結構還原並使用display: inline-block來解決此問題，例如在單元格上，或在表單元格周圍放置另一個相對div。