表格中的 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 元素立即出现 height == 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 的部分。）