做的是移动端的页面,在做项目的过程当中,发现input输入框ios的表现和安卓不一样,ios会比较大,撑满整个input输入框。
原因:
IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
IOS中情况和Chrome 相似。
方法:
- 设置字体大小和行高一致,然后通过
padding
撑开大小 只给IE浏览器设置 line-height
-ms-line-height:40px;
还有css改变光标插入颜色,可参考:
http://www.zhangxinxu.com/wordpress/2018/01/css-caret-color-first-line/