苹果设备 搜索框内placeholder与放大镜按钮无法对齐的解决方案

先来看个图片，考验像素眼的时候到了

 

有没有发现  请输入搜索内容 这几个字与左边的按钮么有对齐？

“细心的”美工【多么不喜欢这样说】提出这样一个bug，然后我只能老实改了。

纠结的是，用电脑看源码很是符合规范，用Google Chrome、火狐、ie9测试都垂直居中，安卓上也是好的，就苹果设备抽风。

左改右改都不对，原来单位都是用的rem，后面用px来测试，结构如下：

<div class="search_box">
<i class="icon iconfont color_gray" >&#xe605;</i>
<input class="search_cnt" type="search" placeholder="请输入搜索内容">
</div>

对于i和input做同样的处理：

height:50px;line-height:50px;

结果苹果设备还是不居中，心烦的很啊，只能硬着头皮，头悬梁、锥刺股，改起……

无奈，改了各种css还是不行，最后换了html结构，如下：

<div class="search_box">
<input class="search_cnt" type="search" placeholder="请输入搜索内容">
</div>

也就是把 i 标签去掉了，直接用伪类before来写，图标用的是iconfont的，意料之外，还是不行，

继续对 伪类 和input 的line-height做了处理，改成line-height:1;哈哈，还是不行！

心都碎了，睡觉，第二天早上上班的时候，不知道哪根筋搭对了，

把line-height:1;改成line-height:inherit, 然后就几乎正常了，

虽然还是有点差距，不过好歹苹果正常了，然而安卓上又不行了，电脑端：Google Chrome、火狐、ie9测试都正常。在Safari上   请输入搜索内容 这几个字还是偏上。

(因为这篇文章是多年前编辑的，只是在草稿箱里，所以没发布，今天发布，有些图片已经展示不出来了，就这样吧。懂得自然懂！)