chrome、firefox、IE中input键入光标部位移位处理计划

日期:2020-12-14 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

访问器中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;
}