专栏首页Danny的专栏&nbsp在IE和FireFox中显示不一致

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/38704045

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

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

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

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

原因

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

        IE浏览器默认字体:

        FireFox浏览器默认字体:

解决方法:

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

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

         font-family :"宋体" ;

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【SSH快速进阶】——struts2简单的实例

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 【MyBatis框架点滴】——MyBatis输出映射

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • 记一次服务器被挖矿木马攻击的经历

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

    DannyHoo
  • SwiftUI:自定义容器

    尽管您不太可能经常这样做,但我想至少告诉您,完全可以在SwiftUI应用中创建自定义容器。这需要更高级的Swift知识,因为它利用了Swift的一些强大功能,因...

    韦弦zhy
  • 基于Region Proposal的深度学习目标检测简述(一)

    开篇需要跟大家道歉,一切忙没时间的理由都是借口,实际上就是偷懒了,这么久才更新,非常抱歉! 本篇争取以最简明的叙述,帮助大家理解下基于Region Propos...

    企鹅号小编
  • LeetCode 54. Spiral Matrix

    ShenduCC
  • 如何识别损坏的Tick数据,今天教你来修复!

    Tick数据是市场微观结构分析中最有用的数据。可是,Tick数据也是最容易受数据损坏影响,因此在用于任何形式的分析之前必须要进行清洗和调整。

    量化投资与机器学习微信公众号
  • 【剑指Offer】替换空格

    但是,显然这种已经有的方法不是面试官想要得到的答案,所以你得另寻方法,自己写个方法,如果写不出,那肯定给面试官不能留下一个好的印象。

    silentcow
  • DAY41:阅读Synchronization Functions

    waits until all threads in the thread block have reached this point and all glob...

    GPUS Lady
  • 安全的COVID-19联系人跟踪的架构

    这篇文章介绍了一种架构以及用于隐私的相关组件,旨在为全国范围内的主动联系跟踪解决方案构建数据平台。

    大数据杂货铺

扫码关注云+社区

领取腾讯云代金券