奇怪的悬停Bug

Question

我有一个带图像的响应模态框。

Code:

http://jsfiddle.net/YCcNY/34/

在其中，当你悬停图像变得更大。 有时，当将鼠标悬停在第1行的最后一张图片上时，格式会中断。 如果不适合你调整窗口大小。

有谁知道如何解决这个问题？

Answer 1

这是没有高度的浮动元素的正常行为。要解决此问题，请为li项目DEMO

指定固定高度

.PhotoContent li {
    width: 20%; 
    height: 100px; /* THIS */
    float: left;
    font-weight: 200;
    clear:none;
    color: rgb(150,150,150);
    cursor: pointer;
    outline: 0px solid green;
}

Answer 2

佐尔坦的回答非常好。您还可以考虑使用CSS变换进行缩放。图像会略微模糊，但好处是变换不会影响图像的实际尺寸，只会影响图像的渲染方式。

li:hover img {
    -moz-transform: scale(1.1);
}