input中 placeholder光标高度兼容问题

在做项目的时候我们一般都会用到输入框，在一次项目测试时，发现一个问题就是光标在其他浏览器显示正常垂直居中，一般的垂直居中我们都是用height与line-height的值相等就解决垂直居中的问题了，而在mac上的safari浏览器中光标过长，如下图：

input{

    height:42px;

    line-height:42px;

}

然后就换了一种方式，给input的height设置了一个较小的高度，然后用padding填充，这样在谷歌、一般浏览器也是垂直居中的，但是在mac上的safari浏览器上又出现另外一个问题，如下图：

input{

     height:24px;

     line-height:24px;

     padding:9px 0;

}

placeholder文字出现下沉情况，经过上网搜索就试了以下的方法：

添加一个伪类，把它的line-height设小一点

input{

    position: absolute;

    left:0;

    top:6px;

    margin:0;

    padding:0;

    height:30px;

    line-height:30px;

}

input ::-webkit-input-placeholder{

     line-height: 30px;

}

input ::-moz-placeholder{

     line-height: 30px;

}

input ::-ms-input-placeholder{

     line-height: 30px;

}

就可以解决mac上safari浏览器光标过长的问题啦~

最后

以上就是可靠白羊为你收集整理的input中 placeholder光标高度兼容问题的全部内容，希望文章能够帮你解决input中 placeholder光标高度兼容问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。