Позиционирование абсолюта div внутри td не работает в firefox

0

Я использую jquery draggable для перетаскивания содержимого на ячейки таблицы, которые являются частью редактора. Мы разрешаем пользователям напрямую перетаскивать контент в соответствующие тэги и использовать шаблон для создания отпечатков и электронных писем.

Когда пользователь перетаскивает таблицы-ячейки редактора, отображается div с возможностью замены split и add. Изображение 174551

Я добавляю этот div внутри hovered 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, имеющего положение относительно предложенного здесь и здесь. Причина в том, что я не уверен, насколько сложным является dom of td, поскольку мы позволяем пользователю полностью настраивать содержимое внутри него.

Ссылка на скрипку

отлично работает в Chrome. Любые другие решения?

Показать ещё 1 комментарий
Теги:
firefox

4 ответа

2
Лучший ответ

Вместо использования <table> <tr> <td> </td></tr> </table> попробуйте создать div как таблицу.

Для справки http://snook.ca/archives/html_and_css/getting_your_di. После этого попробуйте свой код, это может помочь вам.

Дизайн div как таблица - лучший подход. Это может также использоваться для гибкого дизайна.

Поделиться
  • 0
    Весь редактор спроектирован таким образом, что позволяет пользователю создавать и проектировать шаблоны. я не могу просто идти вперед и вносить изменения. Это хорошо тормозит всю существующую функциональность (например, добавление строк / столбцов / использование radcontrols и т. Д.)
  • 0
    Проверьте, я обновил вашу скрипку. Видите, это работает согласно моему другому ответу. jsfiddle.net/qfquj/69 .
1

У Firefox есть проблема с абсолютным позиционированием всякий раз, когда таблицы или display: table-cell задействована display: table-cell, где она будет игнорировать ячейки таблицы как относительный родитель.

Это 13-летняя ошибка Гекко.

Вы можете исправить это, возвращаясь из структуры таблицы и используя display: inline-block на ваших ячейках, например, или помещение другого относительного div вокруг вашей ячейки таблицы.

Поделиться
1

Вот ответ на ваш вопрос. Надеюсь, это может вам помочь.

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">
Поделиться
1 
<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;">
Поделиться
  • 0
    Проверьте, я обновил ваш CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню