背景
input css样式:
{ height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:0px; line-height:50px;font-size:14px;.border-left-radius(4px); }
可以试一下,chrome中打开会发现光标出现在input元素的左上角。而不是预想中的居中。出现这样的原因如下:
- IE:不管该行有没有文字,光标高度与font-size一致。
- FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
- Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
解决办法:
将line-height设置为一个比较小的值,垂直方向的居中用padding实现:
{ height:50px;width:386px;border:0;position:absolute;top:0;left:0; padding:16px 0 16px 4px; line-height:18px;font-size:14px;.border-left-radius(4px); }
时间: 2024-10-05 01:52:45