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>

<div id="Main">
 <div id="LonIn">
  <div id="LonInLeft"></div><!--登录框左半弧-->
  <div id="LonInMain"></div><!--登录框主体-->
  <div id="LonInRight"></div><!--登录框右半弧-->
 </div><!--登录框-->
</div>
</body>
</html>

 

 

 

 

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

 

 

1.

 

#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.将注释去掉

   <div id="LonInLeft"></div><!--登录框左半弧-->
  <div id="LonInMain"></div><!--登录框主体-->
  <div id="LonInRight"></div><!--登录框右半弧-->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值