发生场合:当左边对象是浮动的,右边对象采用外补丁的左边距来定位,则右边对象内的文本会离左边有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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]