Heim  >  Artikel  >  Web-Frontend  >  IE下设置float后margin加倍问题_html/css_WEB-ITnose

IE下设置float后margin加倍问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:32:281146Durchsuche

在进行页面布局时,经常会用到float,但使用了float后,在IE下margin会出现加倍的问题,我一直是用hack的方法,但最近做个页面时,发现用hack   了,样子和在FF下,还是不一样,于是就网上查找了下,加个display:inline;就可以解决了,这样IE和FF下就都一样了。     举例:     CSS,如果这里不使用display:inline: 在IE下会出现加倍问题

.div_float{float:left;width:180px;height:100px;margin:10px;display:inline;border:1px solid #c0de98;}

HTML

<div style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; HEIGHT: 200px; BORDER-RIGHT-WIDTH: 1px">   <div class="div_float"> </div></div>

在这里顺便再说个IE和FF下的不同,以上面代码为例,当使用了float,而且父div没有指定高度,在FF下,父div在子div的上方,而不是IE里那样子div在父div内,解决办法,加个div然后用clear:both就OK了

<div style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px">	<div class="div_float"></div>	<div style="CLEAR: both"></div></div>

Stellungnahme:
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