IE6/IE7でliの下部に4pxの隙間があるバグ

liの子要素にfloatがある場合、IE6/IE7では

要素下で4pxギャップバグが発生します。

コードは次のとおりです:

リーリー

検証の結果、li の子要素が浮動であることがこのバグの発生の必要条件であることが判明しました。このバグの発生の必要十分条件は、li の子要素が浮動であり、li が存在することです。次の CSS 属性セットのいずれか: width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

このバグの条件がわかったので、解決策があります:
方法 1:
#list div set clear:left|both を実行すると、#list li は幅、高さ、ズームを設定できません。

方法 2:
#list li は float:left を設定します。このとき、#list li は幅、高さ、ズームを設定できます。
#list li は、clear:left|both を設定します。現時点では、#list li は幅、高さ、ズームを設定できません。

方法 3:
IE6/IE7 のこのバグは、li の div にvertical-align:top|middle|bottom を設定することで解決できます。これは奇妙すぎるので、vertical-align の値が 3 つのうちの 1 つであることを追加してください。

コードは次のとおりです:

リーリー