各浏览器间空格占位符大小不相同的问题

原创 2016年08月31日 13:58:51


同样一段带有空格的文本,在不同的浏览器上显示却不相同


<div class="main">
	<form>
		用户名:<input type="text" id="user" onkeyup="isUser()" />
		<span id="userInfo">以字母开头,可包含数字、字母、下划线。</span><br><br>
		密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" id="pass" onkeyup="isPassword()" />
		<span id="passInfo">至少8位,必须包含字母、数字</span><br><br>
		邮&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="password" id="mail" onblur="isMail()" />
		<span id="mailInfo">请输入正确邮箱</span>
	</form>
</div>


chrome下:



FF下:



原因:不同浏览器有不同的默认字体,空格符&nbsp;在不同的浏览器下面的显示宽度也不同。


解决方法:

1.对body添加字体样式,如

body{
    font-family:微软雅黑;
}

2.直接在html中用全角输入空格,直接兼容所有浏览器。

======================= 当然还有另外一种方法 ====================

网页栅格化




在<head></head>中引入Bootstrap:

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

html代码为:

<div class="main">
	<form>
		<label class="col-md-2 alr">用户名:</label>
		<input class="col-md-4" type="text" id="user" onkeyup="isUser()" />
		<span class="col-md-3" id="userInfo">以字母开头,可包含数字、字母、下划线。</span><br><br>
		<label class="col-md-2 alr">密码:</label>
		<input class="col-md-4" type="password" id="pass" onkeyup="isPassword()" />
		<span class="col-md-3" id="passInfo">至少8位,必须包含字母、数字</span><br><br>
		<label class="col-md-2 alr">邮箱:</label>
		<input class="col-md-4" type="password" id="mail" onblur="isMail()" />
		<span class="col-md-3" id="mailInfo">请输入正确邮箱</span>
	</form>
</div>

并为每一个alr的class添加一个text-aligh:right;



不同浏览器空格宽度不一样的解决方法

转载自 http://www.oicqzone.com/pc/2015083122336.html HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行...
  • u011344911
  • u011344911
  • 2016年12月02日 16:27
  • 1044

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

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

android 四边border宽度不一致

  • lqfsharks
  • lqfsharks
  • 2015年11月05日 10:47
  • 715

android 布局 中两个空格宽度与一个汉字宽度问题

在Strings.xml中用两个空格(  )占一个汉字的宽度时,两个空格比一个汉字略窄,三个空格(   )比一个汉字略宽 密  &...
  • chazihong
  • chazihong
  • 2017年07月26日 19:07
  • 274

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

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

HTML空格占位符

== 普通的英文半角空格   ==   ==   == no-break space (普通的英文半角空格但不换行)   == 中文...
  • sforiz
  • sforiz
  • 2015年02月25日 14:21
  • 70289

解决html中&nbsp;在不同浏览器中占位大小不统一的问题

解决html中 在不同浏览器中占位大小不统一的问题:     直接在html文档中使用 来表示空格,在不同浏览器中的占位大小是不一样的.因为不同浏览器默认的字体是不一样的,不同...
  • YLXB2
  • YLXB2
  • 2017年01月23日 13:51
  • 666

解决ExtJS的gridpanel在谷歌浏览器中,表头总宽度与每行的总宽度不一致的bug

//修复办法,谷歌浏览器中,table的单元格实际宽度=指定宽度+padding,所以只要重写gridview里的一个方法,如下: Ext.override(Ext.grid.GridView,{ ...
  • a1017680279
  • a1017680279
  • 2016年03月02日 10:15
  • 726

不同浏览器空格宽度不一样的解决方法

转载自 http://www.oicqzone.com/pc/2015083122336.html HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行...
  • u011344911
  • u011344911
  • 2016年12月02日 16:27
  • 1044

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

如文章标题,网络上大多数人说是页面编码和字体设置的问题,可是我照着做了,发现在  Google Chrome浏览器中 解析成的空格宽度仍然比IE和Firefox上的宽,IE和Fire...
  • twtja
  • twtja
  • 2015年07月08日 15:52
  • 2169
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:各浏览器间空格占位符大小不相同的问题
举报原因:
原因补充:

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