1

我已经花了几天时间，我不再有任何想法，如何解决我的问题。我会用截图展示：

在此处输入图像描述 在此处输入图像描述 这个想法是，当鼠标不在元素上时，它只显示顶部和底部，当鼠标悬停时，中间元素向下滑动。如您所见，在第一张图片的中间部分（facebook 和 google+ 图标在哪里），背景是重复的图案，比右边的图片薄 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");
}

我通过 jquery 生成的 html ：

(....).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 上。

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

4

0 回答 0