表中的jQuery slideDown和SlideUp看起来不正确

Question

当我在表格中使用jQuery slideUp和slideDown时，我遇到了一个小问题。我有像这样的HTML（也主要由jQuery生成，但它并不重要）：

<tr class="expandable-container">
  <td colspan="10">
    <div id="3_expandable" style="display: none;">
      <table class="innerTable">
        ...
      </table>
    </div>
  </td>
</tr>

外表的样式：

.main-table {
    border-radius: 0.5em 0.5em 0 0;
    width: 129em;
    background-color: #f1f1f1;    
    margin-top: 1.5em;
    z-index: 10;
    position: relative;
}

.main-table td, .main-table th {
    padding: 1.2em 0.7em;
    border-collapse: collapse;
    border-left: 0.1em solid #dedede;
}

.main-table td:first-child, .main-table th:first-child {
    border-left: 0 solid;
}

.expandable-container td {
    padding: 0 !important;
    background-color: red; /* inserted to identify the problem */
}

由于slideUp和slideDown对表元素不起作用，我在div中包装了我的内容（这是另一个表，但这并不重要），当然这是隐藏的。当我应用slideUp和slideDown方法并在Firefox 6上测试时，由于某种原因，动画显得很滑。所以我设置一个10秒长的滑动时间来检查它，我确定当动画开始时，td元素立即出现，高度为== 20px，div在其中向下滑动。然后一切都按预期进行 - 当div超过td的初始意外高度时，它会覆盖它并扩展到它的预期大小。

这在Firefox 6上发生。它在Chrome 13上没有任何问题。我没有在任何版本的IE上测试它，因为它不是一个预期的浏览器所以我没有经历所有的麻烦将它安装在linux机器上。还没有在Opera上测试，因为现在其他一些脚本崩溃了，这是要修复的。

我附上了slideDown动画第一时刻的截图 - 当td无处不在时（红色背景）。

我的问题 - 是否有办法或解决方法来修复它？

正如Ariel建议的那样，我把它添加为jsFiddle。奇怪的是，即使在FF6上，它也能很好地工作： jsFiddle rendition

编辑：我修复了导致Opera 11崩溃的问题，因此我能够测试它。所以 - 它也发生在Opera 11上。

Answer 1

基于小提琴和你的症状，我认为这与填充或边距（可能是边缘）有关。即，只要元素可见，它就有一个不包含在高度动画中的边距。

但是，由于我没有看到它发生，我无法回答。 （您可能应该尝试找出小提琴与实际代码的不同之处 - 尝试评论css的各个部分。）