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

悠悠 2022-08-11 05:28 229阅读 0赞

###  ###

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

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

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

![SouthEast][]

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

###        原因 ###

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

IE浏览器默认字体：

![SouthEast 1][]

FireFox浏览器默认字体：

![SouthEast 2][]

###         解决方法： ###

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

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

font-family :"宋体" ;

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

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

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

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

[SouthEast]: /images/20220810/ac30fcf05cf4418db7d17d5594bac948.png
[SouthEast 1]: /images/20220810/83ecbbd165584f0194969f8e55acf643.png
[SouthEast 2]: /images/20220810/cea270f5694f4585a28886e0cb9613d5.png