CSS Flip 跨浏览器功能

Question

我正在以下 URL 中创建一个“艺术家表”:http://beta2.thrivemusic.com/artists/

如您所见，如果将鼠标悬停在艺术家上方，会出现 3 个社交图​​标。但是，不同的浏览器会出现不同的错误，因此我需要一些关于我的代码的跨浏览器功能的帮助。

FIREFOX:完美运行GOOGLE CHROME:Facebook 图标链接不起作用移动端(APPLE + ANDROID):默认不显示每个艺术家的正面，而是显示背面

这是我的做法:http://jsfiddle.net/samkimdesign/A7MZ3/2/

/* Artists Flip */

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 175px;
}

#f1_card {
  width: 200px;
  height: 175px;
  transform-style: preserve-3d;
  transition: all 0.4s linear;
}

#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  backface-visibility: inherit;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-image: url("http://beta2.thrivemusic.com/wp-content/uploads/2014/07/flip_back.png");
  backface-visibility: hidden;
  z-index: 9999999999999;
}

如有帮助，将不胜感激，谢谢! :)

Answer 1

尝试添加

Position: relative

到类.face.back。

我也是一样的情况。为后面的 div 添加相对位置有效。