我在表单部分使用了以下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中,光标显示在输入标记的相同高度.我找到了解决方案,如果我删除它所显示的行高,就像我想要的那样.但在IE中,价值是领域的顶部.我需要解决这个问题的方法.
请看my fiddle. [铬不好]
解决方法
从你的css类中删除line-height属性,我认为它会对你有帮助
更新小提琴: 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; }