Question

今天我将Firefox更新到版本45（当前版本）。之后我开始在使用overflow：hidden扩展位于div中的缩略图时出现问题。鼠标悬停缩略图一毫秒缩小，然后执行正确的操作。当您第二次将鼠标悬停在缩略图上时，一切正常。清除浏览器缓存后或长时间没有鼠标悬停在缩略图上时问题会返回。有趣的是，在其他浏览器上正常工作（Chrome，Opera）。

[CSS]

.galleryimg {
    height: 200px;
    width: 200px;
    overflow: hidden;
    -webkit-transition: -webkit-transform .15s linear;
    -moz-transition: -moz-transform .15 linear;
    -webkit-box-shadow:
        0 3px 6px rgba(0,0,0,.25),
        0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow:
        0 3px 6px rgba(0,0,0,.25),
        0 3px 6px rgba(0,0,0,.5);
    box-shadow:
        0 3px 6px rgba(0,0,0,.25),
        0 3px 6px rgba(0,0,0,.5);
}

.thumbnail {
    width: 200px;
    height: 200px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.thumbnail:hover {
    position: relative;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

[HTML]

<div class="galleryimg">
    <a href="#">
        <img class="thumbnail" src="http://theactivephotographer.com/wp-content/uploads/2012/07/TAP_Ad_300x300.jpg" />
    </a>
</div>

JSFiddle

使用'overflow：hidden'缩放位于<div>中的<img/>

0 个答案: