让我迷惑的CSS样式font-size（求大神指指点点）

    font-size在w3school上的解释是：该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。在这里我获得的关键信息是字符框和高度，于是我开始了下面的探索。
   我在一个div标签里面放上了span标签，span里面写了一个字，给div和span分别加上不同的颜色方便观察代码很简单贴出来方便受教育

 *{margin:0;padding: 0; }//这个reset不用教育我，我是为了方便
       .test{font-size:220px;background:#ccc;width:800px;margin:40px auto;}
       .test2{background:#0c93e1; }

<div class="test" >
    <span class="test2">边</span>
</div>

然后就出现了这种样子  


    咋一看没什么区别，我就只注意了上下的边距，而且注意到了这个边距会根据font-size的增大而增高，但是没注意边距大小在不同浏览器下是否一样，后面就出现问题了，现在先不管，我们先去掉上下的边距。
    出现这个边距我很自然而然的想到了line-height（行高），行高的定义在w3school是：设置行间的距离，line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。所以我把line-height设置成跟font-size一样。于是出现了下面的情况
    不见了，妥妥的

   ！！！这什么情况，难道firefox下的字符框比我设置的要大些么，于是我去看了firefox下的盒模型，font-size是220px，盒模型是220×231，你TM的在玩我！多出来的11px哪儿来的，而且根据font-size的增大或缩小这个多出来的距离也会相应的增大或缩小，反正就是不跟你font-size一样。font-size不是设置字符框的高度么，到底是CSS在玩儿我还是浏览器在玩儿我，为了知道这个原因我去找了ie。




    MD你们够了，你们玩的挺欢快的啊，都挺有个性的啊，没一个一样的，看着像一样的再去看看盒模型，还是会差几像素。特别是ie9最特立独行，其他的没行高的时候好歹乖乖的呆在行内，就你上面多一点下面少一点像什么样！然后我在想是不是因为font-size设置的太大的原因，我把大小改成了平时常用的那些大小，发现看不出来了。但是我不能因为设置的大小的原因去忽略这个问题，我又在想是不是没有设置高度，于是我给div加了一个高度，然后我发现他们没什么变化，还是坚持做自己啊！
    我无语了，font-size设置字符框高度，设出来的每个浏览器都不一样，只有chrome最乖设220px出来的盒模型就是220×220，看到这里有大神能告诉我这是为什么吗，有没有什么方式避免这些差异给页面带来的影响。
    我的第二个问题也是关于字符框，字符框什么时候才会出现，我原本以为是在有字符的时候才会出现，直到最近遇到的代码才让我又凌乱了！代码中没有设置高度网页中却出现高度，而且没有字符却设置了font-size。于是我就怀疑了font-size，我发现如果设置了font-size后在div内加上img标签、input标签、button标签、iframe标签（可能还有其他什么标签我没试过）中任意一个，div都会出现高度。于是我困惑了，明明没有字符出现，这字符框出现撑大高度是肿么一回事啊？不知，求解！