Chrome 中文本字段光标问题

我在表单部分使用以下 css。

CSS

.username input{
 background-color: #FFFFFF;
 border: 2px solid #DDDDDD;
 border-radius: 5px 5px 5px 5px;
 color: #9E9E9E;
 height: 30px;
 width: 330px;
 padding:0px 10px 0px 0px;
 padding-left:10px;
 margin:15px 0px 0px 0px;
 line-height:30px;
}

它在所有浏览器中都能正常工作。但在Chrome中，光标显示在输入标签的相同高度。我找到了解决方案，如果我删除line-height它按照我想要的方式显示。但在 IE 中，这些值位于该字段的顶部。我需要这个问题的解决方案。

请参阅我的小提琴 http://jsfiddle.net/4Etyn/。 [chrome 不太好]

Remove line-height你的 css 类的属性，我认为它会对你有帮助
更新的小提琴：http://jsfiddle.net/4Etyn/16/ http://jsfiddle.net/4Etyn/16/

<div class="username">
    <input name="txtFullName" id="txtFullName" type="text" class="user" value="Username" onBlur="if(this.value=='') this.value='Username'" onFocus="if(this.value =='Username' ) this.value=''"  />
</div>

.username input{
    background-color: #FFFFFF; 
    border: 2px solid #DDDDDD;
    border-radius:5px;            
    color: #9E9E9E;
    height: 30px; 
    height: 22px\0/; 
    width: 330px; 
    padding:0px 10px 0px 10px; 
    padding:8px 10px 0px 10px\0/;  
    margin:15px 0px 0px 0px;
    vertical-align:middle;
}
:root .username input{
    height: 30px\9;
    padding:0px 10px 0px 10px\9;
}