0

也许这里有人可以发光。问题最初始于 div.cell 上的 animate({top}) ，它适用于除 Firefox 之外的所有东西，但不久之后我意识到 CSS 'top' 在单元格内的 Firefox 中不受尊重。

Margin-top 也不起作用，因为您只能在 div.table->cell 中添加填充。

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

查看我在 Chrome vs 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);
});
4

1 回答 1

1

如果您将显示设置为inline-block，它应该可以工作。

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

看：JsFiddle

可以在此处找到有用且内容丰富的相关答案：

Firefox 是否支持 position: relative 在表格元素上？

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

于 2013-08-15T17:57:02.150 回答