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

原创 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;



相关文章推荐

不同浏览器中空格占位不同的解决方法

不同浏览器对空格的解释也不尽相同。主要代码如下: function paint(n){ for(var i=0;ii;j--){ document.write...

解决在不同浏览器中使用空格符效果不同的问题

今天外星人同学问我了一个问题,在IE和FF中使用空格符但是显示效果却不一样(使用 但是宽度却不同)起初以为是没写DOCTYPE的问题,但是她说写了。后来就自己试验了一下,发现了问题,记录一下...
  • zky0901
  • zky0901
  • 2013年09月27日 11:32
  • 3491

用JS操作CSS滤镜,注意IE、firefox、chrome浏览器对滤镜支持各不相同

在HTML页面中,可以通过JavaScript操作CSS来获得对页面样式强大的动态控制。CSS滤镜能够实现更加复杂的样式,配合JavaScript,可以做出类似Flash的特殊动画效果。 1  示...
  • lejuo
  • lejuo
  • 2013年12月25日 16:30
  • 5887

Sql语句中,Contains与Like查询结果不相同的问题

我们知道,要模糊查询数据表的话,一般会用到Like语法,而对数据表相应的字段进行全文索引之后,还可以使用速度更快的Contains方法、 但是,我发现,分别使用这两个方法查询出来的结果不一致! ...

MyBatis学习-----解决在"数据表中字段与自己定义的属性类的属性字段不相同“的情况下的问题

本文转载自:孤傲苍狼老师的博客(http://www.cnblogs.com/xdp-gacl/p/4264425.html) 在面对数据库所定义的字段与自己在web工程中定义的属性类的字段不相同的时...

随机给定10个小于10的数字(出现的数字可能重复),从其中取出3个各不相同的数字可组合出多个不同的3位数,请输出这些3位数中最大的那个3位数

//随机给定10个小于10的数字(出现的数字可能重复),从其中取出3个各不相同的数字可组合出多个不同的3位数,请输出这些3位数中最大的那个3位数 //随机给定10个小于10的数字(出现的数字可能重复...

java 利用二进制位进行标记,获取不相同的随机数

java 利用二进制位进行标记,获取不相同的随机数
  • Sun_Ru
  • Sun_Ru
  • 2016年06月29日 14:17
  • 640

跨浏览器的HTML5占位文本(PlaceHolder)方案

====================================================== 注:本文源代码点此下载 =============================...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:各浏览器间空格占位符大小不相同的问题
举报原因:
原因补充:

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