一个前端BUG

lixiaoshuai

一个前端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 所以吧，我就琢磨着要不把俩类写一块，就有了<span class="input-group-addon glyphicon glyphicon-pencil"> 这样的东西，但这样的话效果是这样：

                               
登录/注册后可看大图

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

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

额，这样（在chrome下）就好了（老夫没有firefox，就不管它的死活了）。
其实问题的深究我还是没搞清楚，为啥会有1px的差别，又为啥套一层就好了？浏览器为啥行为不一致呢？

在前端看来是个很蠢的问题是不是！哎卧槽写了多年后端表示压力山大


本文由猪了个去授权（果壳网）发表，文章著作权为原作者所有。

【随手写】偷懒新技能：Applescript

yimei

强烈支持楼主ing……

L-0

强烈支持楼主ing……

Angel丶L

强烈支持楼主ing……

freeparty

强烈支持楼主ing……

怡静

真是难得给力的帖子啊。