margin在IE、Firefox、Chrome、Safari下兼容的超级方法！

问题出现的来由：

笔者本来很注意网页前段兼容的问题，所以在CSS定义和测试时都很小心。但由于在编写CSS过程中调用了其它网站的已经定义好的CSS文件及Jquery文件，所以需要在整合时做很多拆分，以符合自己网站整体CSS的定义，并是整个页面能够将各实用功能恰如其分的融合。问题的技术处在于，被我调用的CSS文件和Jquery文件中，对于层及样式的定义是相互交叉融合，并且代码经过处理，可读性极差，因此出现了一个问题，就是，top或margin-top无论如何经过自己的调用，在IE和其它内核浏览器中，都似乎相差5个像素左右的不同。

在这里，我们不讨论，如何使用display,line-height等属性的兼容性使用，因为在我目前遇到的情况中这些属性定义都不适用了。

我们先来看差别。原先定义的样式代码的主要部分(看红色部分)：

#simple{

   position:absolute;

  top:30px;   

   left:0px;

   width:90px;

   height:30px;

}

经过测试，发现在IE中位置定位成功，但是在chrome和Firefox中，位置尚缺5个像素，或者说，上移了5个像素。

于是笔者这样改：

#simple{

   position:absolute;

  margin-top:30px;   

   left:0px;

   width:90px;

   height:30px;

}

结果还是一样错误！

再改,意图做IE和Firefox的兼容：

#simple{

   position:absolute;

   margin-top:30px;   /*for IE*/

   margin-top:35px ！important;/*for Firefox*/

   left:0px;

   width:90px;

   height:30px;

}

注意：IE不识别 !important。其次，定义顺序，IE以最后一个属性的定义为最终的网页识别定义，虽然不识别！important，但是，IE识别了35px这个高度设置，在Firefox和Chrome下位置定位成功了，但是在IE下又失败了，下移了5个像素。

于是笔者马上调整顺序，如下：

#simple{

   position:absolute;

   margin-top:35px ！important;/*for Firefox*/

   margin-top:30px;   /*for IE*/

   left:0px;

   width:90px;

   height:30px;

}

以为会成功，结果又失败了，其实Firefox也是识别最后一个属性定义值的。所以笔者紧急调用小宇宙，第一，必须解决定义的准确性，第二，必须解决不同浏览器的兼容问题，并且分开定义。

于是：

（1）在属性定义时，先做完整的闭合处理，即

margin:30px 0 0 0; /*上、右、下、左*/

（2）特别定义IE能识别，而其它浏览器不识别的处理，即

*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/

（3）定义两个margin，其中一个只让IE识别，另一个做一般化处理，即：

*margin:30px 0 0 0;  /*IE 6, IE 7, IE 8 可识别*/

margin:35px 0 0 0; /*一般化定义，也注意闭合，并且定义往下多占据5个像素*/

完整代码如下：

#simple{

   position:absolute;

   margin:35px 0 0 0;/*For ALL*/

   *margin:30px 0 0 0;   /*for IE6,7,8*/

   left:0px;

   width:90px;

   height:30px;

}

测试，成功！

注意：仍然需要注意定义的顺序，如果颠倒顺序，IE最后仍识别margin-top:35px的属性。其它浏览器识别了第一个一般化定义之后，就不去关注*margin设置了，而IE识别了最后的*margin值，及top是30px的值，因此定义成功。

在这里，我们忽略了，由于一开始我所说的其它属性设置的兼容性影响，单独做margin的处理，这样，无论其它属性是否兼容，而最后这样的设置，使得高度和margin都兼容了！