如何在 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，而不是scalediv

.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>