方法一:
.login dl dd input{ width:164px; height:20px; line-height:20px; padding:3px 0; border:1px solid #d8d8d8; }
以上是一个登陆时填写用户名的input例子,样式中书写时应该同时用到line-height,padding值,来控制他的行高,以及在文字在输入框中的居中问题。
因为:
IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
方法二:给input的height设定一个较小的高度(与字体一样高),然后用padding去填充,基本上可以解决所有浏览器的问题,比方说一个height:30px, font-size:16px 的input 可以进行如下设置 :
input{
height:16px;
padding:7px 0px;
font-size:16px;
}
具体在应用中,只要保证文字的光标无论何时都和文字的高度保持一致即可,不要过多的去追求显示整个input高度,如果你去尝试了,你会发现那样并不好看。 个人喜欢第二种方法,也是我经常用的方法,很实用。
转载于:https://blog.51cto.com/lflianglan/1215241