css - Microsoft Edge 翻盖卡问题

Question

当我将鼠标悬停在卡片上时，卡片会翻转，这在 Chrome 浏览器中绝对没问题。但在 Microsoft Edge 中，图像也是可见的并且它在翻转。

.main{
  width:500px;
  height:500px;
  border: 1px solid red;

  padding:30px;
}

.first{
    display:flex;
  flex-direction:column;
  // justify-content:center;
  align-items:center;
  img{
    width:200px;
    border-radius:50%;
    margin-top: -50px;
  }
}
.second{
  color:blue;
}


//Need to provide override height and width of flip__card class
.flip__card {

  position: relative;

  &:hover &-front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }

  &:hover &-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  &-front {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    transform: rotateY(0deg);

  }

  &-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

<div class="main flip__card">
  <div class="first flip__card-front">
    <div><img src="https://static.pexels.com/photos/221471/pexels-photo-221471.jpeg" width="200px" height="200px">
  </div>
    <div>
      Dummy text
    </div>
    <div>
    
  <div class="second flip__card-back">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem voluptatem mollitia eius veniam consectetur? Necessitatibus cumque obcaecati, laboriosam minima doloremque quod odit! Quo cupiditate dolorum explicabo laborum, iste tenetur rem.
  </div>
  
</div>

因此，当悬停在卡片上时，在 ME 中浏览器图像也是可见的，并且处于翻转位置。而我没有在卡片背面使用任何图像。

Answer 1

已在 Microsoft Edge 上测试并且有效。我认为您的错误是由于简单的 HTML 错误造成的。确保您所有的 div 标签都正确关闭并位于正确的位置，我认为您不希望将 .card-back 放在 .card-前面.

.main{
  width:500px;
  height:500px;
  border: 1px solid red;
  padding:30px;
}

.first{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.first img {
  width:200px;
  border-radius:50%;
  margin-top: -50px;
}

.second{
  color:blue;
}

.flip__card {
  position: relative;
}

.flip__card:hover .flip__card-front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.flip__card:hover .flip__card-back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip__card-front {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  transform: rotateY(0deg);

}

.flip__card-back {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<div class="main flip__card">

  <div class="first flip__card-front">
    <div><img src="https://static.pexels.com/photos/221471/pexels-photo-221471.jpeg" width="200px" height="200px"></div>
    <div>Dummy text</div>
  </div>
   
  <div class="second flip__card-back">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem voluptatem mollitia eius veniam consectetur? Necessitatibus cumque obcaecati, laboriosam minima doloremque quod odit! Quo cupiditate dolorum explicabo laborum, iste tenetur rem.
  </div>
  
</div>