Internet Explorer-悬停出血时的图像比例

Question

我有：

• 面板
• 它包含一个图像
• 图像内部的底部容器作为叠加层
• 一些内容

将鼠标悬停在面板上时，图像将缩放为1.1。 这工作得很好。 但是，随着图像缩放，可以在外部和叠加层下快速看到它。这在Chrome上可以无缝运行，并且在Internet Explorer中似乎是一个问题。

问题是否可以确保与chrome相同的行为，即图像不会在其自身容器的外部扩展到覆盖层的侧面/底部？

 .item { width: 100%; height: 500px; float: left; background: #ebebeb; overflow: hidden; } .item .content { width: 100%; font-family: "Segoe UI"; padding: 20px; } .item .image { width: 100%; height: 300px; float: left; background: red; overflow: hidden; position: relative; } .item .image img { width: 100%; transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; border: none; outline: none; box-shadow: none; } .item .border { width: 150%; height: 20px; position: absolute; background: #fff; bottom: 0; left: 0; overflow: hidden; } .item:hover .image img { transform: scale(1.1) rotate(0.1deg); -ms-transform: scale(1.1) rotate(0.1deg); -webkit-transform: scale(1.1) rotate(0.1deg); border: none; outline: none; box-shadow: none; } 

 <div class="row"> <div class="large-up-2"> <div class="column"> <div class="item"> <div class="image"> <img src="http://www.planwallpaper.com/static/images/Beautiful_Wallpaper_1080p_Full_HD.jpg"/> <div class="border"></div> </div> <div class="content"> Content </div> </div> </div> </div> </div> 

Answer 1

通过在下面的元素上添加-1px的边距来解决底部问题，​​从而弥补了1px的空白。