The problem of css| is common to the novice friends, do not know how to be good, can not think of solutions.
In fact, this is the legendary "IE 3px bug." The solution is also relatively simple. Take a look at the following example instructions.
gap between two layers in IE (ie 3px bug)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>YourHomePage.com.cn</title>
<style type= "Text/css" >
<!--
#left {
Float:left;
width:200px;
height:100px;
Background: #f00;
}
#right {
width:200px;
height:100px;
Background: #fc0;
}
-->
</style>
<body>
<div id= "left" >YourHomePage.com.cn</div>
<div id= "right" >YourHomePage.com.cn</div>
</body>
Float method for solving 3px bugs
In this example, we can solve the IE 3px bug by applying float:left floating to the right layer.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>YourHomePage.com.cn</title>
<style type= "Text/css" >
<!--
#left {
Float:left;
width:200px;
height:100px;
Background: #f00;
}
#right {
Float:left;
width:200px;
height:100px;
Background: #fc0;
}
-->
</style>
<body>
<div id= "left" >YourHomePage.com.cn</div>
<div id= "right" >YourHomePage.com.cn</div>
</body>
a smokescreen for solving 3px bugs
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>YourHomePage.com.cn</title>
<style type= "Text/css" >
<!--
#left {
Float:left;
width:200px;
height:100px;
margin-right:-3px;
Background: #f00;
}
#right {
width:200px;
height:100px;
Background: #fc0;
}
-->
</style>
<body>
<div id= "left" >YourHomePage.com.cn</div>
<div id= "right" >YourHomePage.com.cn</div>
</body>
