javascript - 无法使用 IE8 通过脚本设置 marginTop 样式，但可以在成人浏览器中使用

Question

我正在尝试使用脚本为菜单的滑出设置动画。为此，我需要为元素的 marginTop 属性设置动画，并将其从 -30px 增加到 0px。

但是，在 IE8 中，动画根本不执行任何操作。我将其追溯到在脚本中设置 marginTop 似乎没有效果的事实。在 Chrome 和 Firefox 中，这工作正常。

这是一个适用于 Chrome/Firefox 但不适用于 IE 的示例:

http://jsfiddle.net/rm58T/2/

这是 IE 错误吗？如果是，是否有解决此问题的方法？谢谢!

更新:

这是该错误的一些屏幕截图。

在 Chrome 中，我的 Fiddle 看起来像这样(你可以看到“新菜单的名称”文本，因为我们用脚本更改了页边距)

在 IE8/Vista 中，它看起来像这样。我可以在开发人员工具中确认 topMargin 实际上是预期的 0px，但是元素没有重新绘制:

另一个更新:

这个错误重现(至少对我而言)在 Windows 7 上运行的 IE8 以及在 Windows 2008 Server 上运行的 IE8。它不会在 WinXP 上运行的 IE7 上为我重现。我没有任何 IE9 机器来测试它。

另一个更新:

我发现了一种可能的解决方法。如果我将 p.newmenu 设置为 position: absolute; 而不是 position: relative; 那么它就可以工作了。然而，在我的例子中，我将整个东西放在一个弹出菜单中，并且需要这个控件来推出模式对话框的底部，所以绝对定位它不是一个选项。但是，也许这些知识可以帮助找到可行的解决方案。可以找到此解决方法的示例 here .

你会相信另一个更新吗？

我确实现在找到了解决方法。如果我使用 top: -30px; 而不是负上边距，那么一切正常。不过，top 的行为与边距有点不同，并且使 UI 看起来不太好。特别是，当您使用 top: -30px 时，您的元素下方将有 30px 的空白，因为相对定位不会影响其他页面流。

我非常想弄清楚为什么我不能像在其他浏览器上那样在 IE 上使用负的上边距，所以我仍然希望有人能提供一个答案来提供负的所有好处top margin 但也适用于 IE8。

Answer 1

此行为的触发器是 IE8 处理 fieldset 元素的方式。

您可以通过将 fieldset 的显示设置为内联(或内联 block )来解决这个问题。

div.modal.addmenu fieldset {
   display: inline;   
}