空格&nbsp在不同浏览器中显示距离不一致问题解决方法
2016-01-04 11:57
881 查看
在ie、firefox、chrome浏览器上显示的效果不太一样。主要是前面的空格宽度不同。
网上资料说
不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默认字体是Times New Roman。
宋体是字符等宽的字体,但Times New Roman不是字符等宽的字体。由于浏览器默认字体的不同,
空格符 在不同的浏览器以下的显示宽度也不同。
比如以下代码分别以IE和chrome进行測试
IE9下显示效果例如以下:
能够看出两个 在chrome中占一个汉字的宽度,而在IE中四个 才占一个汉字的宽度。
解决的方法:
一、改动页面的编码格式<meta http-equiv="content-type" content="text/html; charset=gbk">
和页面的编译方式(myeclipse中)
然后IE右键改动编码显示格式即可
二、(推荐)在空格那一行设置一下字体,把字体设置成随意一种字符等间距的字体即可了。
如:
PS:nbsp;替换为
假设style="font-family: '宋体'" 实现不了,可将"宋体"改为"Times New Roman"
作者:itmyhome
网上资料说
不同的浏览器会有不同的默认字体,一般 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下显示效果例如以下:
能够看出两个 在chrome中占一个汉字的宽度,而在IE中四个 才占一个汉字的宽度。
解决的方法:
一、改动页面的编码格式<meta http-equiv="content-type" content="text/html; charset=gbk">
和页面的编译方式(myeclipse中)
然后IE右键改动编码显示格式即可
二、(推荐)在空格那一行设置一下字体,把字体设置成随意一种字符等间距的字体即可了。
如:
<div style="font-family: '宋体'">nbsp;nbsp;nbsp;nbsp;我是第二行</div>
PS:nbsp;替换为
假设style="font-family: '宋体'" 实现不了,可将"宋体"改为"Times New Roman"
作者:itmyhome
相关文章推荐
- SVM学习笔记(一)
- Android:Activity:启动模式
- Android各种屏幕分辨率(VGA、HVGA、QVGA、WQVGA、WVGA、FWVGA) 详解
- 连接数据库超时设置autoReconnect=true
- 推荐两款基于JQuery的在线内容编辑器
- ngix配置
- js判断object类型
- 存在性能问题的地方
- Spark 综合应用
- Arrays.asList()方法总结
- 在fragment中使用onActivityResult
- 关于Tomcat的URIEncoding以及GET乱码
- android打开开发者选项
- 解析excel文件
- NSTimer
- SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成,浏览器中的Keep-Alive
- 没有注册类
- 说说Java的内存
- gcc基础 知识
- ThreadLocal与InheritableThreadLocal的区别