如何在 div 内部缩放而不在 mozilla 浏览器上扩展 div 本身？ [复制]

Question

我正在使用缩放功能，因此当我将鼠标悬停在 div 中时，其中的图像和文本会增长。在 chrome 浏览器上它工作得很好，但在 mozilla 上 div 也会增长。我该如何解决？我以前从来没有修复过浏览器兼容性问题，所以我不知道从哪里开始。

<div class="zoom-in">
    <a href="#">
        <img src="https://via.placeholder.com/150">
    </a>
    <h2><a href="#"><span>My Text</a></h2>
</div>

.zoom-in {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease ;
    -ms-transition: all 0.2s ease ;
    -o-transition: all 0.2s ease ;
    transition: all 0.2s ease ;
}
.zoom-in:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

解决方案： 最后我决定只为 mozilla 浏览器使用特定的 CSS 代码

.zoom-in {
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease ;
    -o-transition: all 0.2s ease ;
    transition: all 0.2s ease ;
    &:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}
// Mozilla browser only
@-moz-document url-prefix() {
    .zoom-in {
        max-width: -moz-fit-content;
        &:hover {
            transform: none;
        }
        &:hover img,
        &:hover h2 {
            -moz-transition: all 0.2s ease ;
            -moz-transform: scale(1.1);
        }
    }
}

Answer 1

悬停时需要在img 上应用scale 而不是div 上的scale

.zoom-in {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  max-width:fit-content
}

.zoom-in:hover img,
.zoom-in:hover h2 {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  transform-origin: 0 0;
}

<div class="zoom-in">
  <img src="https://via.placeholder.com/150" alt="img">
  <h2><a href="#" class="text">My Text</a></h2>
</div>