Question

也许这里有人可以发光。问题最初是在div.cell上使用动画（{top}）开始的，除了Firefox之外的所有内容都可以工作但不久之后我意识到css“top”在单元格中的Firefox中不受尊重。

Margin-top也不起作用，因为你只能在div.table-＆gt;单元格中添加填充。

关于如何在不使用padding-top的情况下制作动画的任何想法（这可能超出了div.cells的标准，也许唯一遵守它的是Firefox）？

查看我在Chrome与Firefox上创建的jsfiddle。它甚至适用于Internet Exploder和Safari。

http://jsfiddle.net/tinymonkey1/yd94g/5/

HTML

<div class="table">
   <div class="row">
      <div class="cell" style="top:20px">
         Column 1
      </div>
      <div class="cell">
         Column 2
      </div>
   </div>
</div>
<div class="spacer"></div>
   <div class="demo">
      But this works !
   </div>
</div>

CSS

.table{display:table}
.table .row {display:table-row}
.table .row .cell {display:table-cell;position:relative}

.spacer{height:100px;width:100%}

.demo{}

JQuery的

$('.table .row .cell').mouseenter(function(){
    $(this).animate({top:'20px'},300); 
});
$('.demo').mouseenter(function(){
    $(this).animate({'marginTop':'20px'},300);
});

Answer 1

如果您将显示设置为inline-block，则应该有效。

.table .row .cell {display:inline-block;position:relative}

请参阅： JsFiddle

可在此处找到有用且信息丰富的相关答案：

Does Firefox support position: relative on table elements?

总结：不，Firefox不支持表元素的相对位置吗？

div.cell问题上的JQuery .animate（）位置 - Firefox

1 个答案: