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

底したがって1ピクセルのギャップをカバーする、以下の要素に-1pxマージンを追加することで解決しました。