css-ie 3px

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>




posted on 2011-08-12 08:18    阅读(329)  评论(0编辑  收藏  举报

导航