IE6下float 產(chǎn)生雙倍margin的問題
假如為一個(gè)div設(shè)置css:
float:left;
margin-left:10px;
在IE7,Firefox等瀏覽器下能正確解釋左邊距10px。但是在IE6下會(huì)理解為左邊距20px。
解決方法:
為這個(gè)div的css中添加:
display:inline;
這個(gè)是ie6的bug,下面還有更好的解決辦法!
借助于padding樣式和!important標(biāo)記,可以實(shí)現(xiàn)Firefox與IE6的兼容效果。
<div style="clear: both; float: none;">
借助于padding樣式和!important標(biāo)記,可以實(shí)現(xiàn)Firefox與IE6的兼容效果。
</div>
<div style="border: 1px solid blue; float: left; clear: both; padding-bottom: 0px !important; padding-bottom: 100px;">
<div style="border: 1px solid red; float: left;width: 100px; height: 100px; font-size: 12px; margin-top: 100px; margin-bottom: 100px; margin-left: 100px !important; margin-right: 100px !important; margin-left: 50px; margin-right: 50px;">
width: 100px;
height: 100px;
margin: 100px;
</div>
</div>
第一種:
.div {
background:orange;/*ff*/
*background:green !important;/*ie7*/
*background:blue; /*ie6*/
}
第二種:
.div {
margin:10px;/*ff*/
*margin:15px;/*ie7*/
_margin:15px;/*ie6*/
}
第三種:
#div { color: #333; } /* ff */
* html #div { color: #666; } /* IE6 */
*+html #div { color: #999; } /* IE7 */
關(guān)鍵詞:雙倍margin