【長這麼大第一次見到前端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的差異，又爲啥套一層就行了？瀏覽器爲啥行爲不一致呢？
在前端看來是個很蠢的問題是否是！哎臥槽寫了多年後端表示瀏覽器兼容壓力山大