在Safari中绝对定位搞砸了

Question

我尝试使用jQuery进行鼠标悬停淡入淡出效果。这个想法是以这种方式将两个图像放在彼此的顶部。

<img class="img-circle webdesign " src="assets/img/webdesign_.png" style="position: absolute;" >
<img class="img-circle" src="assets/img/webdesign_hover.png">

适用于Chrome。屏幕截图（http://cl.ly/image/0f3M0f2q1t2S）

但是，我在使用Safari（http://cl.ly/image/44290O3n1X0b）

时遇到此问题

即使页面加载，您也可以看到两个图像，灰度图像应出现在彩色图像的顶部，并隐藏后者。

连连呢？

Answer 1

我也遇到了一些问题（仅限Safari），其元素具有绝对定位。 我通过指定左右属性来解决问题：

＆＃13;

＆＃13;

.element{
  position:absolute;
  left:0;
  right:0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML

<img class="img-circle webdesign " src="assets/img/webdesign_.png">
<img class="img-circle" src="assets/img/webdesign_hover.png" style='display:none;'>

JS

$('.img-circle').mouseenter(function() {
    $('.img-circle').toggle();
});

CSS

.img-circle {
    position: absolute;
    top: ???;
    left: ???;
}