关于 空格实体在最新的IE、Firefox和Google Chrome浏览器中解析宽度不一致问题的解决

原创 2015年07月08日 15:52:17
如文章标题,网络上大多数人说是页面编码和字体设置的问题,可是我照着做了,发现在

Google Chrome浏览器中 解析成的空格宽度仍然比IE和Firefox上的宽,IE和Firefox对 的解析宽度是一样的,唯独


Google Chrome浏览器要宽一些发火。如下的代码片段:

代码片段

在页面编码均为unicode(utf-8),并且上述代码片段的字体均为font-family:"宋体",SimSun;的情况下,在三个主流浏览器中的表现如下:

在Google Chrome中的表现

在IE11中的表现

在Firefox中的表现

最后的解决方法是:将两个的  换成一个输入法为全角状态下的空格(即所谓的大空格),将单个的 换成一个输入法为半角状态的空格(即所谓的小空格)!问题成功解决!修改后的代码片段如下图所示:

使用全角空格后的代码片段

最后在IE、Firefox和Google Chrome浏览器三大主流浏览器中看到的效果如下:

修改后IE11中的表现

修改后Google Chrome中的表现

修改后Firefox中的表现


最后,其实还有一种比较标准的方法,那就是使用CSS样式,设置字体间距,即使用CSS的letter-spacing

例如:<label for="password" style="letter-spacing:4px;">密码:</label>


关于&nbsp;空格实体在最新的IE、Firefox和Google Chrome浏览器中解析宽度不一致问题的解决

如文章标题,网络上大多数人说是页面编码和字体设置的问题,可是我照着做了,发现在  Google Chrome浏览器中 解析成的空格宽度仍然比IE和Firefox上的宽,IE和Fire...
  • twtja
  • twtja
  • 2015年07月08日 15:52
  • 2162

空格&nbsp在不同浏览器中显示距离不一致问题解决方法

  在ie、firefox、chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同。网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox...
  • itmyhome
  • itmyhome
  • 2014年05月27日 20:49
  • 8933

Chrome firefox ie等浏览器空格(&nbsp;)兼容问题

使用( ;)空格浏览器之间,显示的不一样,对不起等现象。解决方案:用半角空格&ensp;或者全角空格&emsp;就可以了,&ensp;相当于半格中文字符的宽度,&emsp;相当于一个中文字符宽...
  • u012234452
  • u012234452
  • 2016年10月17日 12:49
  • 2384

关于&nbsp;空格实体在最新的IE、Firefox和Google Chrome浏览器中解析宽度不一致问题的解决

如文章标题,网络上大多数人说是页面编码和字体设置的问题,可是我照着做了,发现在  Google Chrome浏览器中 解析成的空格宽度仍然比IE和Firefox上的宽,IE和Fire...
  • twtja
  • twtja
  • 2015年07月08日 15:52
  • 2162

Chrome firefox ie等浏览器空格&nbsp;宽度不一样怎么办

之前某个页面用了空格 ,但是在chrome firefox 和ie显示的宽度都不一样,无法对齐。 搜索了一下,很多人都转载了那篇设置成宋体的,可是仍然没对齐,要么ie对齐,要么ch...
  • u014802309
  • u014802309
  • 2015年09月15日 10:52
  • 1639

Chrome firefox ie等浏览器空格(&nbsp;)兼容问题

使用( ;)空格浏览器之间,显示的不一样,对不起等现象。解决方案:用半角空格&ensp;或者全角空格&emsp;就可以了,&ensp;相当于半格中文字符的宽度,&emsp;相当于一个中文字符宽...
  • apple_wheat
  • apple_wheat
  • 2017年03月07日 14:21
  • 108

Chrome firefox ie等浏览器空格(&nbsp;)兼容问题

使用( ;)空格浏览器之间,显示的不一样,对不起等现象。解决方案:用半角空格&ensp;或者全角空格&emsp;就可以了,&ensp;相当于半格中文字符的宽度,&emsp;相当于一个中文字符宽...
  • u012234452
  • u012234452
  • 2016年10月17日 12:49
  • 2384

空格&nbsp在不同浏览器中显示距离不一致问题解决方法

  在ie、firefox、chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同。 网上资料说 不同的浏览器会有不同的默认字体,一般 IE默认字...
  • u011244415
  • u011244415
  • 2014年05月28日 13:47
  • 331

空格&nbsp在不同浏览器中显示距离不一致问题解决方法

  在ie、firefox、chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同。网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox...
  • itmyhome
  • itmyhome
  • 2014年05月27日 20:49
  • 8933

IE内嵌google chrome frame解决浏览器兼容问题

作者:xwdreamer 出处:http://www.cnblogs.com/xwdreamer 参考文献: http://www.pseudowired.com/201...
  • Goskalrie
  • Goskalrie
  • 2016年08月02日 14:02
  • 654
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于&nbsp;空格实体在最新的IE、Firefox和Google Chrome浏览器中解析宽度不一致问题的解决
举报原因:
原因补充:

(最多只允许输入30个字)