&nbsp在IE和FireFox中显示不一致

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1336899

​

 在IE和FireFox中显示不一致

        在做新闻发布系统后台登陆界面时，为了界面美观，想在“密码”二字中间添加空格，从而让“用户名”、“密    码”、“验证码”垂直对齐。

       于是在代码中加了两个“ ”，在FireFox中达到预期效果了：

        我们都知道，一个“ ”为一个字符大小。可我明明已经在“密码”二字中间添加了两个“ ”了，刚好为一个汉字的间距。但是在IE浏览器中测试的结果，“密码”二字中间的间距仍然很小（大约只有一个字符的大小）。我继续添加“ ”，IE中“密码”二字中间的间距不变，还是大约只有一个字符的大小，无论添加多少个 标记，好像最对只显示一个空格;而FireFox中则乖乖地如数显示出所添加的空格长度。

原因

        查明原因后才知道，这是由每种浏览器的默认字体不同而造成的，一般IE的默认字体为Simsun，FireFox的默认字体为宋体16号字，而显示空格时，浏览器也会根据自己的默认字体来显示该字体格式下的空格，就造成了上述“不同的浏览器显示的 长度不同”的问题。

        IE浏览器默认字体：

        FireFox浏览器默认字体：

解决方法：

        知道了原因，解决方法也非常简单：

第一种方法：在代码中为有关区块中的字设置字体即可，比如这里将上述需要格式化的“密  码”的字体设置为宋体：

         font-family :"宋体" ;

         当然设置成其他字体，如楷体、隶书也是可以的。

        设置字体这里需要说明一下，在设置的一些字体中，不一定一个 相当于一个字符长度的空格，比如：Times New Roman，四个 才是一个字符的长度，所以说，关于其他一些字体，还需要大家用实践去探索。

第二种方法：在浏览器中改变字体，不过这好像是一种掩耳盗铃的做法→_→，咱们做出的程序是让大家用的 ，总不能让每个用户都去修改自己的浏览器吧，因此不建议采用这种方法来“蒙骗自己”。

        通过写这篇博客才发现，原来小小的空格中也有大大的智慧啊，我们要本着全心全意为人名服务的原则，抓住每一个细节，做傻瓜式系统。