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）。我通过指定 left 和 right 属性解决了这个问题：

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