Question

我有一个基本的“用户名”文本框。此文本框可在此处查看：http://68.71.136.106/test.htm

在Chrome中，TextBox看起来我希望它看起来如何。水印定位正确，当用户键入文本时，文本正确定位。但是，在IE中，当我在框中键入文本时，文本正确定位。但是，水印定位不正确。它看起来比垂直中心低2或3个像素。我正在使用JQuery Watermark插件：http://code.google.com/p/jquery-watermark/。我的代码如下所示：

<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="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>

我有办法妥善解决这个问题吗？谢谢！

Answer 1

水印不喜欢内联CSS样式，尝试将它们放在样式块中，它应该解决问题。

IE中的CSS内容位置

1 个答案: