这个问题普遍的困扰着新手朋友，不知道如何是好，想不出办法进行解决。
其实这就是传说中的“IE 3px bug”。解决的办法也比较简单。请看下面的示例说明。
IE中两个层之间的间隙（IE 3px bug）
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>YourHomePage.com.cn</title> <style type="text/css"> <!-- #left { float:left; width:200px; height:100px; background:#f00; } #right { width:200px; height:100px; background:#fc0; } --> </style> </head> <body> <div id="left">YourHomePage.com.cn</div> <div id="right">YourHomePage.com.cn</div> </body> </html>
解决3px bug的方法之浮动法float
此例中，我们给右边的层，应用float:left;浮动，即可解决IE 3px bug。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>YourHomePage.com.cn</title> <style type="text/css"> <!-- #left { float:left; width:200px; height:100px; background:#f00; } #right { float:left; width:200px; height:100px; background:#fc0; } --> </style> </head> <body> <div id="left">YourHomePage.com.cn</div> <div id="right">YourHomePage.com.cn</div> </body> </html>
解决3px bug的方法之障眼法
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>YourHomePage.com.cn</title> <style type="text/css"> <!-- #left { float:left; width:200px; height:100px; margin-right:-3px; background:#f00; } #right { width:200px; height:100px; background:#fc0; } --> </style> </head> <body> <div id="left">YourHomePage.com.cn</div> <div id="right">YourHomePage.com.cn</div> </body> </html> |
