使用空格或者&nbsp 在IE、firefox、chrome浏览器中显示距离不一致

本文探讨了不同浏览器中空格( )显示宽度不一致的问题,主要原因是默认字体不同,提出了解决方案,包括修改页面编码和设置字体。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

空格在ie、firefox、chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同,这可能是因为不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,下面为大家介绍几种不错的解决方法

  在ie、firefox、chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同。 


网上资料说 
不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman, 
宋体是字符等宽的字体,但Times New Roman不是字符等宽的字体,因为浏览器默认字体的不同, 
空格符 在不同的浏览器下面的显示宽度也不同。 

例如以下代码分别以IE和chrome进行测试 

<table> 
<tr> 
<td>我是第一行</td> 
</tr> 
<tr> 
<td>nbsp;nbsp;nbsp;nbsp;我是第二行</td> 
</tr> 
<tr> 
<td>nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;我是第三行</td> 
</tr> 
</table> 
在chrome显示效果如下: 
 
IE9下显示效果如下: 
 
可以看出两个&nbsp;在chrome中占一个汉字的宽度,而在IE中四个&nbsp;才占一个汉字的宽度。 
解决办法:
一、修改页面的编码格式<meta http-equiv="content-type" content="text/html; charset=gbk"> 
和页面的编译方式(myeclipse中) 
 
然后IE右键修改编码显示格式即可 

二、(推荐)在空格那一行设置一下字体,把字体设置成任意一种字符等间距的字体就行了。 
如: 

复制代码
代码如下:

<div style="font-family: '宋体'">nbsp;nbsp;nbsp;nbsp;我是第二行</div> 

PS:nbsp;替换为&nbsp;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值