ie6中的著名的双倍边距清除方法

避免出现该问题的方法：

避免给一个页面元素同时设置float:left和margin-left属性。

解决方法：display:inline;

图解：

例子：

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   5:  <title></title>
   6:  <style type="text/css">
   7:  body,div{
   8:  margin:0;
   9:  padding:0;
  10:  }
  11:  #one{
  12:  width:100px;
  13:  height:100px;
  14:  background:red;
  15:  float:left;
  16:  margin-left:100px;
  17:  /*display:inline; 如果不加这行代码在ie6中会有双倍边距，定义的是左外边距是100像素，但在ie6中会显示200像素，所以不加这行代码时要避免给一个页面元素同时设置float:left和margin-left属性。*/
  18:  }
  19:  #two{
  20:  width:200px;
  21:  height:200px;
  22:  background:blue;
  23:  float:left;
  24:  margin-left:300px;
  25:  }
  26:  </style>
  27:  </head>
  28:  <body>
  29:  <div id="one">盒子1</div>
  30:  <div id="two">盒子2</div>
  31:   
  32:  </body>
  33:  </html>
posted @ 2014-03-09 22:44  小路_同学  阅读(171)  评论(0)    收藏  举报