首页 > 代码库 > 不同浏览器中空格符的兼容问题

不同浏览器中空格符的兼容问题

  刚开始学习前端的时候,遇到空格符在不同浏览器中不等宽的问题自然不以为然,因为我只在一个浏览器下查看!随着自身的提高,也就更能看清楚问题的存在。

有一次,在制作一个注册登录界面的时候,这种参差不齐的表现实在让人忍无可忍。通过查阅资料及各位前辈的见解,总结如下:

1、在空格那一行设置一下字体,把字体设置成任意一种字符等间距的字体,如‘’宋体‘’。

  由于不同的浏览器会有不同的默认字体,IE的字体多数是采用宋体为默认字体,像谷歌浏览器,欧鹏,火狐,safari等,这些浏览器多数会采用微软雅黑,这种黑体系字体。

宋体是字符等宽的字体,但Times New Roman不是字符等宽的字体,因为浏览器默认字体的不同,空格符 在不同的浏览器下面的显示宽度也不同。

  根据上述方法,我将字体统一改为宋体,火狐、谷歌等浏览器显示对齐,而原先对齐的360浏览器却不对齐了,很是不解,因此不是很推荐此方法,而且也影响整体美观。

2、通过输入法的全角/半角切换,在全角状态下直接按space(而不是&nbsp)全浏览器兼容。

  这个方法亲测简单有效,在全角状态下一个空格符占两个字节,和汉字等同(可能全角状态只在中文下有用,所以管你什么字体都能使空格与汉字等宽)

全角占两个字节,半角占一个字节,半角全角主要是针对标点符号来说的,全角标点占两个字节,半角占一个字节,而不管是半角还是全角,汉字都还是要占两个字节 

在编程序的源代码中只能使用半角标点(不包括字符串内部的数据) 在不支持汉字等语言的计算机上只能使用半角标点(其实这种情况根本就不存在半角全角的概念)

 ,.?‘! ……这些是半角的 ,。?‘! ……这些是全角的。


 

不同浏览器中空格符的兼容问题