In-Field Labels jQuery Plugin水印效果异常

公司的美工针对新产品做了一个登录页面,其中使用到了In-Field Labels jQuery Plugin。In-Field Labels jQuery Plugin是一款jquery的水印插件,项目地址是:http://fuelyourcoding.com/scripts/infield/index.html

在使用过程中,发现在IE6、7、8下显示有问题,样例代码和效果图如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>InFieldLabel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/infieldLabel.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$("label").inFieldLabels();
		});
		</script>
		<style type="text/css">
		form p {
			position: relative
		}
		
		label {
			position: absolute;
			top: 3px;
			left: 5px;
			background: url(img/user16.png) no-repeat;
			color:#aaa;
			padding-left: 20px;
			font-family: 微软雅黑;
		}
		</style>
	</head>

	<body>
		<form action="#">
			<p>
				<label for="field_id">
					用户名
				</label>
				<input type="text" name="field_id" value="" id="field_id">
			</p>
		</form>
	</body>
</html>
In-Field Labels jQuery Plugin水印效果异常_第1张图片
可以看到,有焦点后, 图片和文字显示参差不齐 ,实际中效果更不理想。



导致这个问题的原因有两点:
1. 字体问题:“用户名”三个字的字体格式是微软雅黑,In-Field Labels首页中并没有说明对字体的要求,但是实际中很多字体不支持。参考css的字体说明,个人做了简单的测试,似乎只有Serif和Sans-serif类字体好用,其它字体类都不好使。(css字体说明:http://www.w3school.com.cn/css/css_font-family.asp)

2. 图片问题:字体问题修复后,图片依旧不好使,联想到字体,将png格式的图片转为换jpg后,问题修复了。

修改后的代码和效果图如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>InFieldLabel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/infieldLabel.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$("label").inFieldLabels();
		});
		</script>
		<style type="text/css">
		form p {
			position: relative
		}
		
		label {
			position: absolute;
			top: 3px;
			left: 5px;
			background: url(img/user16.jpg) no-repeat;
			color:#aaa;
			padding-left: 20px;
			font-family: 宋体;
		}
		</style>
	</head>

	<body>
		<form action="#">
			<p>
				<label for="field_id">
					用户名
				</label>
				<input type="text" name="field_id" value="" id="field_id">
			</p>
		</form>
	</body>
</html>
In-Field Labels jQuery Plugin水印效果异常_第2张图片


你可能感兴趣的:(水印,labels,In-Field)