发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有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"> <!-- *{ padding: 0; margin: 0; } #layout{ background: #F1F1F1; width: 400px; float: left; } #floatbox { float: left; width: 100px; height: 50px; background: #6d6; } p { margin: 0 0 0 100px; background: #dd9; } --> </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"> <!-- *{ padding: 0; margin: 0; } #layout{ background: #F1F1F1; width: 400px; float: left; } #floatbox { float: left; width: 100px; height: 50px; background: #6d6; } p { margin: 0 0 0 100px; background: #dd9; } * html #floatbox { margin-right: -3px; } * html p { height: 1%; margin-left: 0; } --> </style> </head> <body> <div id="layout"><div id="floatbox">floatbox</div><p>现在没有3px了</p><p>现在没有3px了</p></div> </body> </html> |
|