バグ: IE6_html/css_WEB-ITnose のフローティング要素間の間隔が 3 ピクセルになる

発生: 要素がフローティングし、次に非フローティング要素が自然に浮遊して、表示される 3 ピクセルのギャップに近づきます。

以下は個人的なテストです:

test01: 非浮動要素はブロックレベル要素です

<div class="box01">box01</div><div class="box02">box02</div>

.box01{float: left; background: #f1c100;}.box02{background: red;}

ie6 効果: 3px 間隔は表示されません

test02 :No Floating 要素は inline 要素に変更されます

<div class="box01">box01</div><span class="box02">box02</span>

.box01{float: left; background: #f1c100;}.box02{background: red;}

ie6 効果: 3px 間隔が表示されます

test03: この 3px 間隔を修復します (方法 1)

HTML 構造は test02 に従います。 CSS は次のとおりです:

.box01{float: left; background: #f1c100;}.box02{background: red;_margin-left:-3px;}/*_margin-left:-3px;修复3px间隔bug*/

効果: 間隔なし

test04: この 3 ピクセルの間隔を修正します (方法 2)

構造は上記と同じで、CSS は次のとおりです。

.box01{float: left; background: #f1c100;}.box02{background: red;float: left;}/*让不浮动元素也浮动起来*/

効果: スペースなし

概要:

これに基づいて、このバグの発生状況: 要素が浮動し、次に非浮動インライン要素が自然に浮動するように改善できます。近づくと現れる3pxの隙間。