Question

我的CSS：

#content {
 border: 2px solid #4190d4;
 padding: 220px;
 background-color: #282828;
 margin-top: 65px;
 -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

我的jQuery：

$("#header a").click(function() {
   $('#content').animate({padding: 300}, 500);
}

这段代码在IE8中完美运行，我的#content div从220px增长到300px。但是，在Firefox或基于Webkit的浏览器中，我的#content div首先缩小为0px，然后调整为300px。我正在使用jQuery 1.4.2，Firefox 3.6和Chrome 4.0.249.89。

有什么想法吗？

Answer 1

$("#header a").click(function() {
   $('#content').animate({paddingLeft: 300, paddingTop: 300, paddingBottom: 300, paddingRight: 300}, 500);
});

不确切知道原因，但您必须指定每个填充属性。也许jQuery应该处理这种浏览器差异，但无论如何，DIY和它都可以工作。

Answer 2

您应该使用高度和宽度而不是填充。那你就没问题了。

jQuery动画可以在IE8中运行，而不是在Firefox或Webkit中运行

2 个答案: