首页 > 代码库 > &nbsp在IE和FireFox中显示不一致

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

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

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

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

        

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

      

       原因

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


        IE浏览器默认字体:

        

        FireFox浏览器默认字体:

        

        

        解决方法:

        知道了原因,解决方法也非常简单:

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

         font-family :"宋体" ;

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

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

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

   

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