【长这么大第一次见到前端BUG所以兴奋地写到】一个前端BUG

爬虫锚点：input-group-addon glyphicon

<span class="input-group-addon glyphicon glyphicon-pencil">

正文：
咳，周末无聊（其实是加班），写了个传说中的修改备注栏，完全完成的效果是这样的：

画笔处按照bootstrap的demo写的。。一个是icon，bootstrap里叫Glyphicons，由一系列glyphicon打头的类构成，一个叫做input-group，基础用法：http://getbootstrap.com/components/#input-groups 所以吧，我就琢磨着要不把俩类写一块，就有了 这样的东西，但这样的话效果是这样：

刚好美妙的差了一个像素。。。WTF。。。看到这个我整个人都不好了。
搜了一下，果然有人问过这个问题，这就是传说中的浏览器兼容问题了。。。就是Firefox和chrome不一致。。。解决办法是套一层，变成：

<span class="input-group-addon"><span class="glyphicon glyphicon-whatever"></span></span>

额，这样（在chrome下）就好了（老夫没有firefox，就不管它的死活了）。
其实问题的根源我还是没搞清楚，为啥会有1px的差别，又为啥套一层就好了？浏览器为啥行为不一致呢？
在前端看来是个很蠢的问题是不是！哎卧槽写了多年后端表示浏览器兼容压力山大