Div CSS布局常见问题：两个层之间的间隙

最新推荐文章于 2024-06-05 09:20:42 发布

qxf1547

最新推荐文章于 2024-06-05 09:20:42 发布

阅读量948

点赞数

文章标签： css div float xhtml html ie

本文链接：https://blog.youkuaiyun.com/qxf1547/article/details/5732526

版权

这个问题普遍的困扰着新手朋友，不知道如何是好，想不出办法进行解决。
其实这就是传说中的“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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#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> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#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>