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

我有：


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


将鼠标悬停在面板上时，图像将缩放为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>
                

最佳答案

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

关于html - Internet Explorer-悬停出血时的图像比例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41832202/