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

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-11-16 22:32:59

不同浏览器中空格符的兼容问题的相关文章

获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容

/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scrollTop||0, scrollX:window.scrollX||document.body.scrollLeft|

在老式浏览器中不完全兼容HTML5、CSS3

在head中添加如下: <!-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-> 在CSS3 后添加 behavior:url(ie-css3.htc); 以上两种方法可以在IE6+中使用HTML5和CSS3,兼容大部分

css在各浏览器中的兼容问题

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容

css浏览器兼容问题(在IETester及其他浏览器中亲试过)

最近在研究一些关于浏览器兼容性问题的css问题,先归纳总结如下:(1)在一些现代浏览器(opera,chrome,谷歌,safari)中,如果给块级标签如div设置padding后会导致元素的height和width增加,在IE中则不会增加,但是只在IE6中不增加,IE7以上在IETester中测试都会增加,解决办法:可以使用 !important 多设一个 height 和 width (2)使元素水平垂直居中:垂直居中:将该元素的line-height设置为元素本身的高度,再通过vertic

前端浏览器JavaScript及CSS兼容总结

一. getElementById [标准参考] getElementById 是 Document 接口提供的方法,用于获取一个元素,该方法传入的参数应该是目标元素的 id 属性的值,目标元素的 id 是一个大小写敏感的字符串,并且该 id 在文档内应该是唯一的. [问题描述] 但是在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取 name 属性值为 elementName 的 A APPLET BUTTON F

Javascript限制网页只能在微信内置浏览器中访问

转载:http://segmentfault.com/a/1190000000754332 最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开.那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因

AMD:浏览器中的模块规范

为实现与Node.js相同方式的模块写法,大牛们做了很多努力.但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用script tag,script 默认的异步性导致很难实现与Node.js一模一样的模块格式.Modules/Wrappings 使得实现变为现实.虽然和Node.js的模块写法不完全一致,但也有很多相似之处,使得熟悉Node.js的程序员有一些亲切感.但Node.js终究是服务器端的JavaScript,没有必要把

ie浏览器中的不同

ie浏览器中不支持奇数的单位他自己会取整 IE6会自动把奇数字号+1 ==> 建议使用偶数 浏览器兼容详解 http://w3help.org/zh-cn/causes/

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2