CSS Content Position in IE
I have a basic "username" textbox. This textbox can be seen here: http://68.71.136.106/test.htm
In Chrome, the TextBox looks how I want it to look.The watermark is positioned properly, and when a user types text, the text is positioned properly. However, in IE, When I type text in the box, the text is positioned properly. But, the watermark is not positioned properly. It looks like it is 2 or 3 pixels lower than vertical center. I am using the JQuery Watermark plugin: http://code.google.com/p/jquery-watermark/. My code looks like this:
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src开发者_如何学C="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="/resources/scripts/jquery.watermark.min.js"></script>
</head>
<body>
<div style="background-color:#E6E7E8; padding:40px;">
<div>Username</div>
<div><input id="usernameField" type="text"
style="background-position:183px 332px; background-image:url(/images.png); height:15px; width:146px; border:0px none; padding:5px 10px 0px 10px; color:#A6A8AB; font-size:10pt; font-family:Verdana;" /></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#usernameField").watermark("USERNAME");
});
</script>
</body>
Is there a way for me to fix this appropriately? Thank you!
The watermarks don't like inline CSS styles, try putting them in a style block and it should fix the problem.
加载中,请稍侯......
精彩评论