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

Question

我有：

• 小组
• 它包含图像
• 图像内的底部容器作为叠加层
• 一些内容

将鼠标悬停在面板上时，图像会缩放到1.1。这完全没问题。但是，随着图像的缩放，可以在外部和叠加层下快速查看。这可以在Chrome上无缝运行，并且在 Internet Explorer 中似乎是一个问题。

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

.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的差距。