移動端placeholder不能垂直居中解決方案

1.問題描述

---

問題如圖：手機端placeholder文字偏上，垂直方向不居中，input光標顯示偏上
解決IE下不支持placeholder屬性

2.解決方案

---

• css

 .phoneNumber input {

                width: 100%;
                font-size: .34rem;
                display: inline-block;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                font-family: PingFang-SC-Regular;
                border: 1px solid #68be4c;
                border-radius: .1rem;
                text-indent: .4rem;
                color: #333;
                padding: .16rem 0;
                float: left;
            }

• html

``` <div class="phoneNumber"> <input type="text" placeholder="輸入手機號碼" /> </div> ```

3.成果

問題完美解決，placeholder文字完美居中，光標顯示正常

原文地址：https://segmentfault.com/a/1190000015185065