0

背景画像を使用して各リスト項目内にグラフィックを表示する順序付けられていないリスト (垂直に表示) があります。

ユーザーがズームするまでは問題なく見えます。ユーザーがズームすると、一部のリスト項目の下部 (内側) に小さな隙間が表示されます。background-image がリスト アイテムよりも短くなったためにギャップが表示されますが、どちらも同じ高さ (44px) に設定されています。

この例を参照してください。ギャップを識別しやすくするために、各リスト項目に赤い背景を追加しました。Google Chrome で一度拡大してみてください。

http://jsbin.com/okozaz/2/edit

ギャップをなくす方法はありますか?

background-image はスプライトの一部であるため、background-size: cover を使用できません。

4

2 に答える 2

0

おそらく何らかの値の丸め誤差が原因で、Chrome は<li>ズームイン時に s を異なる方法でレンダリングし、高さが 45px と 44px になるものがあります。ただし、回避策は、高さと行の高さを li に設定せず、アンカー要素に任せることです。

jsfiddle を参照してください

于 2012-10-04T18:35:07.843 に答える
0

高さを 44px から 43px に減らします。それは私に似ています、これはあなたの例に役立ちます

于 2013-04-29T16:43:19.103 に答える