Heim > Web-Frontend > HTML-Tutorial > Bug:IE6中浮动元素3px间隔_html/css_WEB-ITnose

Bug:IE6中浮动元素3px间隔_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:34:46
Original
1311 Leute haben es durchsucht

发生场合:一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的间距。

 

以下为个人所做测试:

 

test01:不浮动元素为块级元素

<div class="box01">box01</div><div class="box02">box02</div>
Nach dem Login kopieren

.box01{float: left; background: #f1c100;}.box02{background: red;}
Nach dem Login kopieren
Nach dem Login kopieren

ie6效果:没有出现3px间距

test02:不浮动的元素修改为行内元素

<div class="box01">box01</div><span class="box02">box02</span>
Nach dem Login kopieren

.box01{float: left; background: #f1c100;}.box02{background: red;}
Nach dem Login kopieren
Nach dem Login kopieren

ie6效果:出现3px间距

  

test03:修复这个3px间距 (方法一)

html结构按照test02,css如下:

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

效果:没有间距

test04:修复这个3px间距 (方法二)

结构同上,css如下:

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

效果:没有间距

 

 

小结:

    据此,可以完善此bug  发生场合:一个元素浮动,然后一个不浮动的行内元素自然上浮与之靠近会出现的3px的间距。

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage