访问器中input键入光标部位移位详解 在工作中中遇到的难题,尝试着找找处理方式,还真有呢!记下来便捷自身便捷别人吧
之前在新项目里碰到过1个难题
input键入框用1个情况图仿真模拟,设定height和line-height1样的高宽比,使里边的键入文本可以垂直居中,
在FF下出現的状况是:点一下input时,键入光标实际上上跟input的height1样高,但当刚开始键入文本时,光标又变得跟文本1样高,
chrome下光标跟input的height1样高,
而IE下光标跟文本的尺寸1致。
1直没弄搞清楚为何这模样,今日听罗浮宫里的同学1探讨,才了解缘故所属。
基本结果以下: IE:无论该行有木有文本,光标高宽比与font-size1致。
FF:该行有文本时,光标高宽比与font-size1致。该行无文本时,光标高宽比与input的height1致。
Chrome:该行无文本时,光标高宽比与line-height1致;该行有文本时,光标高宽比从input顶部到文本底部(这两种状况全是在有设置line-height的情况下),假如沒有line-height,则是与font-size1致。
处理的计划方案: 给input的height设置1个较小的高宽比,随后用padding去填充,基础上能够处理全部访问器的难题
input{
height:16px;
padding:4px0px;
font-size:12px;
}