CSS：margin遇上inline，各浏览器的反映

1、inline

元素默认垂直对齐方式为以父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了元素之间的间隙。

2、例子

 <div style="position: fixed; top: 10px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
    </div>
    <div style="position: fixed; top: 100px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;margin-left: -65px;" /> //65=元素宽度+间隙（一般为5px左右）
    </div>

界面：左侧为Firefox，右侧为chrome;
浏览器不一样，建议不一样，父元素的宽度也不一样，当设置margin-left时，会出现细微的差异。（该例子中-65px和-64px在Firefox中的效果不一样，可以自己测一下）。

3、修改：兼容各版本

 //第一种：
 //div 设置font-size: 0px;
 //margin-left设置元素宽度
  <div style="position: fixed; top: 200px; right: 10px; font-size: 0px;">
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;" />
        <img width="60px" height="60px" src="1.png" style="display: inline;margin-left: -60px;" />
    </div>
    
    //第二种
    //将同类元素都设为display: block;float: left; 
    //偏移元素设置margin-left设置元素宽度
    <div style="position: fixed; top: 300px; right: 10px; ">
        <img width="60px" height="60px" src="1.png" style="display: block;float: left;" />
        <img width="60px" height="60px" src="1.png" style="display: block;float: left;" />
        <img width="60px" height="60px" src="1.png" style="display: block;margin-left: -60px;float: left;" />
    </div>