html - 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 间隙。