近来，写html网页的时候，发现一个问题：同一个网页Firefox和Chrome显示不一样。这。。。一般人都认为是引擎的问题吧，毕竟一个webkit，一个gecko，渲染肯定不一样。但是，细想后发现，其实不是引擎的问题哦。
这是中间搜索框的源码：
为了让大家看得清楚，我给里面的控件标上了颜色：
绿色的为那个input，蓝色和红色分别是class为photo和search的button。
从源码看到，各控件之间是没有东西的，但是为什么有白色的间隙呢？两浏览器显示不同的根本原因就是这个间隙的存在，并且每个浏览器定义的这个间隙宽度不一样（实测Chrome的比Firefox多1px，因此溢出）。
通过Firefox的开发者工具看到，这个"空白"就是罪魁祸首，不知道为什么Chrome的没有提示
好了，排除了引擎的问题，然后怎么解决呢？这是一个啼笑皆非的解决方案[1]，只需要将控件间的空行删掉就行。
可见间隙消失，再调整搜索框长度，两浏览器就显示正常了。
或者给input、两button控件加上这个也行：
1 | float:left; |
参考：