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

1359 查看

爬虫锚点: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的差别,又为啥套一层就好了?浏览器为啥行为不一致呢?
在前端看来是个很蠢的问题是不是!哎卧槽写了多年后端表示浏览器兼容压力山大