IE6 3PX bug

话说这几天在模仿页面

既然模仿那就按自己的思路做咯

做着做着总能碰到些问题

今天又遇到一个

上面的数值是指 #LonInMain 的宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#Main
{
margin:auto;
width:60px;
background-color:#00FF66;
height:90px;
padding: 0px;
}
/****************登录条*****************************/
#LonIn
{
height:35px;
width:60px;
background-color:#00FF66;
border:0;
padding: 0px;
margin: 0px;
padding: 0px;
font-size:0;
}
#LonInLeft
{
background-color:#FFFF00;
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
}
#LonInMain
{

background-color:#990099;
height:35px;
width:50px;
float:left;
clear: none;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
}
#LonInRight
{
/*background-image:url(./images/LonInRight.gif);*/
background-color:#0000FF;
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
border:0;
font-style: normal;
margin-right:-3px;/*加上这句布局就对了少了这句就如上图所示的效果了*/
}

/***************************************************/
</style>
</head>

<body>

另外百度上提问找到两个方法

#LonInLeft
{
background-image:url(./images/LogInLeft.gif);/*图片为 5*35px的*/
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
display:inline;
}
#LonInMain
{
background-image:url(./images/LonInMain.gif);/*图片为 6*35px的*/
height:35px;
width:50px;
float:left;
clear: none;
margin: 0px;
padding: 0px;
display:inline;
}
#LonInRight
{
background-image:url(./images/LonInRight.gif);/*图片为 5*35px的*/
width:5px;
height:35px;
float:left;
margin: 0px;
padding: 0px;
display:inline;
}

变为行内显示

和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>

2.将注释去掉

猜你喜欢