求教！div+CSS里的3pxbug是什么意思啊？谢谢，最好举个例子说明！
展开全部
DIV浮动IE文本出现3px间距的bug
发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有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>
修正过：(加了以下代码)
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
<!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>
发生场合：当左边对象是浮动的，右边对象采用外补丁的左边距来定位，则右边对象内的文本会离左边有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>
修正过：(加了以下代码)
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
<!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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是一个关于负边距的margin-left:-3px;只有IE6有这个BUG，详细可以见参考资料
参考资料： http://www.ecofe.cn/?p=209
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
定义样式的
追问
哥们你好牛啊。。
追答
哈哈！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
