CSS FLOAT 扫盲之ie6 下双倍margin问题

问题描述

在ie6下面如果某元素同时应用了float和margin属性，并且margin的方向和float的方向相同的话，会出现双倍的margin。

下图的css样式如下

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*This last value applies the 100px left margin */
  }

 

 

但是在ie6下面会出现margin-left=200情况

如下图

 

 

 

解决方法加上display:inline就可以了，不用担心，这一个div还是一个块元素

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  display: inline;
  }

其实上面不是最佳的解决方法，因为这样不管是什么浏览器都会执行display:inline这样一个动作，改用如下方法会更好

.floatbox

{

float:left;

width:150px;

height:150px;

margin:5px 0 5px 100px;

_display:inline;

}

_display:inline只有ie6会去处理此属性，而别的浏览器可以不考虑此属性，站在一个程序员的立场去考虑问题的话，这样可以节省不少时间，提高页面的渲染速度，仅此而已！