css 解决方案-3px bug 和左浮动右侧顶部对齐

来源：互联网发布：ubuntu如何修改用户名编辑：程序博客网时间：2024/05/16 07:15
<!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=utf-8" />  <title>3px bug 和左浮动右侧顶部对齐</title>  <style type="text/css">  *{      margin:0; padding:0;      }      body{      font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px;      }      a,img{      border:0 none;  }  .wrap{      width:1000px; text-align:center;      margin:30px auto; padding:10px;      color:#fff; border:1px dashed #f00;  }  .photo{      width:150px; height:150px;      background:#393; float:left;      _margin-right:-3px;      line-height:30px;  overflow:hidden;}  /*display:table-cell;//ie8+ ff*zoom:1; *display:inline-block; //ie7- ，两者选其一width:2000px;//ie8+ ff 长度不限制*width:auto;//ie7- 兼容*/.contain{      display:table-cell; *zoom:1; /**display:inline-block; */width:2000px; *width:auto; padding-left:10px;    background:#09F;      text-align:left;      line-height:30px;     }  </style>  </head>    <body>  <script type="text/javascript">      var tit=document.title;      alert(tit);  </script>  <div class="wrap">      <div class="photo">          <a href="http://www.ruizhengyun.cn"><img src="http://img.my.csdn.net/uploads/201303/16/1363416871_1697.jpg" alt="最珍贵年轻的心" width="150" height="150" /></a>      </div>      <div class="contain">          不得不记住的那句话：<br/>          青春的土壤中<br/>          只有记忆是潮湿的<br/>          我们不是植物<br/>          不能在这块土地上生生不息<br/>          当我们回眸青春<br/>          仿佛有一种说不出的痛<br/>          很多人问我<br/>          青春的诀别是否意味着年迈的将近<br/>          其实<br/>          青春，它一直都在继续……      </div>  </div>  </body>  </html>