html - 当我在 Chrome 浏览器中使用 css 过渡缩放效果时，溢出隐藏和边框半径不起作用

Question

在我的演示链接中，请将鼠标悬停在图像部分，查看图像超出问题。

当我在 Chrome 浏览器中使用 css 过渡缩放效果时，溢出隐藏和边框半径不起作用。

它在 Mozilla Firefox 上运行良好，但 chrome 无法正常运行，我给出了溢出隐藏和边框半径，但悬停图像超出了图像区域。

如何解决这个问题。我尝试了很多时间，但无法修复并且找不到正确的解决方案。

请点击演示

http://tcxsandbox.com/stack-overflow/

同时检查第二条评论，我已经放置了 fiddle 链接。

Answer 1

必须在使用 z-index 之后声明相对位置的父元素和绝对位置的子元素，并在子元素之前声明父元素(隐藏边界半径和溢出)。示例:

     <div class="parent">
         <img  class="child" src="yourimage.jpg" />
     </div>

<style>
      .parent{
         /*must declare border radius and z-index*/
         position: relative;
         border-radius:100px;
         z-index:5;
       }
     .parent img{    /*Child element*/
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out ;
            transition: all .3s ease-in-out;
            -webkit-transform: scale(1,1) ;
            -moz-transform: scale(1,1);
            transform: scale(1,1);
            z-index:4;  /*here's where magic happens*/
        }
        .parent img:hover{
            img{
                -webkit-transform: scale(1.1,1.1) ;
                -moz-transform: scale(1.1,1.1);
                -o-transform: scale(1.1,1.1);
                -ms-transform: scale(1.1,1.1);
            }
        }
</style>

这应该有效。注意:我建议为两个元素(父元素和子元素)声明边框半径以防止交叉浏览问题。