Bug of 4px gap at the bottom of li in IE6/IE7

When there is a float in the child element of li, a 4px gap bug will occur under the 25edfb22a4f469ecb59f1190150159c6 element in IE6/IE7.

The code is as follows:

<ul class="list">
<li><div>vapour</div></li>
<li><div>百度</div></li>
<li><div>淘宝</div></li>
<li><div>迅雷</div></li>
</ul> 

After testing, it was found that the floating sub-element of li is a necessary condition for the occurrence of this bug. The necessary and sufficient condition for the occurrence of this bug is that the sub-element of li is floating and li has one of the following CSS attributes set: width, height, zoom, padding -top, padding-bottom, margin-top, margin-bottom.

Now that we know the conditions for this bug, we have a solution:
Method 1:
#list div sets clear:left|both, then #list li cannot set width, height, zoom.

Method 2:
#list li sets float:left. At this time, #list li can set width, height, and zoom.
#list li sets clear:left|both. At this time, #list li cannot set width, height, and zoom.

Method 3:
This bug in IE6/IE7 can be solved by setting vertical-align:top|middle|bottom to the div in li. It's too weird, just add that the value of vertical-align is one of the three.

The code is as follows:

<span style="color: #0000ff;">e044d2a09139d9b2c47a31f904b3bb97
<span style="color: #0000ff;">14a847f1faebf69197cb0fafdbfa4644
<span style="color: #0000ff;">3d5478e9d993de8d190f19a54b37087d
<span style="color: #0000ff;">60ed07da427cf8df16e141ecce19312f
<span style="color: #0000ff;">509d6b94c7fd323ed3ae25413b060b05IE6/IE7中li底部3px的Bug<span style="color: #0000ff;">4e3748de21581ee431d1e6b28ae0e6e5
<span style="color: #0000ff;">fc446f57c48bb94078e754e6cb9d08f0<span style="color: #800000;">
ul <span style="color: #000000;">{<span style="color: #ff0000;"> margin<span style="color: #000000;">:<span style="color: #0000ff;"> 0<span style="color: #000000;">;<span style="color: #ff0000;"> padding<span style="color: #000000;">:<span style="color: #0000ff;"> 0<span style="color: #000000;">;<span style="color: #ff0000;"> list-style<span style="color: #000000;">:<span style="color: #0000ff;"> none<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
hr <span style="color: #000000;">{<span style="color: #ff0000;"> clear<span style="color: #000000;">:<span style="color: #0000ff;"> both<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
.list li <span style="color: #000000;">{<span style="color: #ff0000;"> width<span style="color: #000000;">:<span style="color: #0000ff;"> 420px<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
.list div <span style="color: #000000;">{<span style="color: #ff0000;"> float<span style="color: #000000;">:<span style="color: #0000ff;"> left<span style="color: #000000;">;<span style="color: #ff0000;"> width<span style="color: #000000;">:<span style="color: #0000ff;"> 400px<span style="color: #000000;">;<span style="color: #ff0000;"> height<span style="color: #000000;">:<span style="color: #0000ff;"> 24px<span style="color: #000000;">;<span style="color: #ff0000;"> background<span style="color: #000000;">:<span style="color: #0000ff;"> red<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
.v-top div <span style="color: #000000;">{<span style="color: #ff0000;"> vertical-align<span style="color: #000000;">:<span style="color: #0000ff;"> top<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
.v-middle div <span style="color: #000000;">{<span style="color: #ff0000;"> vertical-align<span style="color: #000000;">:<span style="color: #0000ff;"> middle<span style="color: #000000;">; <span style="color: #000000;">}<span style="color: #800000;">
.v-bottom div <span style="color: #000000;">{<span style="color: #ff0000;"> vertical-align<span style="color: #000000;">:<span style="color: #0000ff;"> bottom<span style="color: #000000;">; <span style="color: #000000;">}
<span style="color: #0000ff;">f6a7be0f8a4ff27c604c27f91e9d8007
<span style="color: #0000ff;">a00c7700380d9d47b313872b46e2e23a
<span style="color: #0000ff;">d99db4b1092f70b93b1d052048f7f06c
<span style="color: #0000ff;">5c0bc81a9a56cb0675e9c3f71e5dd755
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884vapour<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884百度<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884淘宝<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884迅雷<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">608e2325d5ce4c7ed4efb9a1c8624dd6
<span style="color: #0000ff;">e59981c376de8846c243f72a47344cf7
<span style="color: #0000ff;">0a3f7e2a9d1633152a10fe83207e016c
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884vapour<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884百度<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884淘宝<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c5da97ff43a3535c0316f5903e832eadc5
<span style="color: #0000ff;">c14497a7130dfe45b9e2cae391a06e058377450273fd4f13292264845f24a884迅雷<span style="color: #0000ff;">14c0e87cfb7299c311ed7ad8a1c8c6c503096a33a9bafb977989cdfbba56fcf3
929d1f5ca49e04fdcb27f9465b944689
231a563c997aa9e3e0ae614bd16728b0
ed9d351795b47b840e0514fde30d8d6c
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906bvapour16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b百度16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b淘宝16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b迅雷16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
231a563c997aa9e3e0ae614bd16728b0
691e443abda26b82f102d221d21dfebf
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906bvapour16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b百度16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b淘宝16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6dc6dce4a544fdca2df29d5ac0ea9906b迅雷16b28748ea4df4d9c2150843fecfba68bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>