IOS端 margin-top 和 margin-bottom 使用负数时的区别

有以下html代码

<div style="width: 30%;" class="shang">
  1
</div>
<div style="width: 40%;" class="shang">
  2
</div>
<div style="width: 30%;" class="shang">
  3
</div>
<div style="width: 30%;" class="xia">
  A
</div>
<div style="width: 40%;" class="xia">
  B
</div>
<div style="width: 30%;" class="xia">
  C
</div>

 

使用以下两种class设置方式

第一种：
　　.shang{
　　　　float: left;
　　　　height: 100px;
　　}

　　.xia{
　　　　float: left;
　　　　height: 20px;
　　　　margin-top: -20px;
　　}

第二种：
　　.shang{
　　　　float: left;
　　　　height: 100px;
　　　　margin-bottom: -20px;
　　}

　　.xia{
　　　　float: left;
　　　　height: 20px;
　　}

　　逻辑上，上诉两种方式，对应的效果应该是一样的，但是在浏览器调试的时候分别运行在nexus 和 iphone 上，发现在iphone上的运行效果是不一样的
　　对于ios端，第一种情况margin-top: -20px; 会导致 .xia的三个div重叠在一起

　　真是坑啊