jquery - 奇妙なホバー バグ

Question

画像付きのレスポンシブモーダルボックスがあります。

Code:

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

その中で、ホバーすると画像が大きくなります。1 行目の最後の画像にカーソルを合わせると、フォーマットが崩れることがあります。そうでない場合は、ウィンドウのサイズを変更します。

誰もこれを修正する方法を知っていますか?

Answer 1

これは、高さのない浮動要素の通常の動作です。それを修正するには、アイテムに固定の高さを与えますli-デモ

.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);
}