您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > DIV浮動IE文本出現(xiàn)3px間距的bug

DIV浮動IE文本出現(xiàn)3px間距的bug

文章來源：365jz.com 點擊數(shù)：282 更新時間：2008-04-26 18:42 參與評論

發(fā)生場合：當左邊對象是浮動的，右邊對象采用外補丁的左邊距來定位，則右邊對象內(nèi)的文本會離左邊有3px的空白誤差。

沒加修正：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css">  </style> </head> <body> <div id="layout"><div id="floatbox">floatbox</div><p>離左邊3px</p><p>離左邊3px</p></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

修正過：(加了以下代碼)

* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}

不考慮mac下ie5.02

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css">  </style> </head> <body> <div id="layout"><div id="floatbox">floatbox</div><p>現(xiàn)在沒有3px了</p><p>現(xiàn)在沒有3px了</p></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]