jQuery slideDown将宽度更改为1px

Question

我已经花了几天时间，我已经没有任何想法了，如何解决我的问题。 我将通过屏幕截图显示：

这样的想法是，当鼠标不在元素上时，它只显示顶部和底部，当鼠标悬停时，中间元素向下滑动。 正如你所看到的，在第一张图片中，中间部分（Facebook和谷歌+图标在哪里），背景是重复的图案，它比右图中的1px更细。在不同屏幕分辨率上捕获的相同元素我们的内容与屏幕分辨率一致。奇怪的是，所有图像都具有相同的宽度，但看起来不同。

css代码：

.ribbon .vintage .nolog {
width: 92px;
}

.ribbon .vintage .nolog .top {
width: 92px;
height: 59px;
background: url("/img/ribbon/vintage/n/vintage_nolog_top.png");
}
.ribbon .vintage .nolog .center {
width: 92px;
display: none;
background: url("/img/ribbon/vintage/n/vintage_nolog_repeat.png") repeat-y;
}
.ribbon .vintage .nolog .bottom {
width: 92px;
height: 69px;   
background: url("/img/ribbon/vintage/n/vintage_nolog_bottom.png");
}

html我通过jquery生成：

(....).append($('<div/>', {'class': 'vintage'}).hover(slideDown, slideUp).(....)
//and here those animating functions
    var slideUp = function() {
        $(this).find('.center').stop(true, false).slideUp(options.duration);
    }
    var slideDown = function() {
        $(this).find('.center').stop(true, true).slideDown(options.duration);
    }

代码很简单..哦，这个错误只出现在Chrome：x

上

jsfiddle：http://jsfiddle.net/QbX9f/ 有一些鼠标悬停故障，但我没有在实际应用中。另外 - 结果就像我预期的那样 - 在这里你看不到毛刺，它是由css3 scale（）引起的，它适用于所有元素..但最奇怪的是 - 只在chrome上。

更新：/ 我现在发现，当我不重复中间部分（将其高度设置为背景图像高度）时，它确实会缩小！太奇怪了。