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

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

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


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

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


68.png

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


      原因


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


       IE浏览器默认字体:


69.png

69.png


       FireFox浏览器默认字体:


70.png


       解决方法:


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


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


        font-family :"宋体" ;


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


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


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


 


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


相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
Web App开发 JavaScript
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
1174 0
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
Web App开发 安全
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
接口框架中WebDriver启动IE、Firefox和Chrome浏览器
|
Web App开发 前端开发 JavaScript
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同?
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同?
158 0
|
Web App开发 前端开发 JavaScript
怎么让CSS兼容IE和FireFox火狐的技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理 方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。
1191 0
|
Web App开发 前端开发 JavaScript
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
1199 0
|
Web App开发 JavaScript 前端开发
javascript事件处理在IE和FireFox中的区别
    如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。
1025 0