DIV浮动IE文本出现3px间距的bug

最新推荐文章于 2024-09-18 13:55:16 发布

zgqtxwd

最新推荐文章于 2024-09-18 13:55:16 发布

阅读量308

点赞数

分类专栏： css 文章标签： div ie html xhtml float layout

css 专栏收录该内容

486 篇文章 0 订阅

订阅专栏

发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有3 px的空白误差。

没加修正：

运行代码框

<!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> <<A href="http://www.66of.com" target=_blank>DIV</A> id="layout"><<A href="http://www.66of.com" target=_blank>DIV</A> id="floatbox">floatbox</<A href="http://www.66of.com" target=_blank>DIV</A>><p>离左边3<A href="http://www.66of.com" target=_blank>px</A></p><p>离左边3<A href="http://www.66of.com" target=_blank>px</A></p></<A href="http://www.66of.com" target=_blank>DIV</A>> </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> <<A href="http://www.66of.com" target=_blank>DIV</A> id="layout"><<A href="http://www.66of.com" target=_blank>DIV</A> id="floatbox">floatbox</<A href="http://www.66of.com" target=_blank>DIV</A>><p>现在没有3<A href="http://www.66of.com" target=_blank>px</A>了</p><p>现在没有3<A href="http://www.66of.com" target=_blank>px</A>了</p></<A href="http://www.66of.com" target=_blank>DIV</A>> </body> </html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]