兼容ios11中safari浏览器input标签光标错位问题

1.不能直接设置input行高为输入框的高度，外部套个盒子用padding去挤；

2.如果是多个一排的情况

不能直接设置父元素search-box的布局，比如display：inline-block、浮动、定位或者弹性布局等，光标还是会错位，

父元素只能是块级元素

给父元素再套一个元素input-wrap，该元素用浮动就可以了

具体写法：

情况一：

<div class="search-box">
<input type="" name="" value="" class="search js-search" placeholder="	输入关键字搜索">
</div>

.search-box {
width: 100%;
padding: 0.18rem 0.58rem;
background-color: #f2f2f2;
border-radius: 3px;
.search {
width: 100%;
height: 0.34rem;
background-color: #f2f2f2;
line-height: 0.34rem;
font-size: 0.28rem;
color: #333333;
&::-webkit-input-placeholder {
height: 0.34rem;
line-height: 0.34rem;
font-size: 0.26rem;
color: #999999;
}
}
}

情况二：

<div class="input-wrap ml-15 mr-30">
<p class="input-box">
<input class="input-item" type="text" placeholder="最低价格">
</p>
</div>
<div class="input-wrap ml-30">
<p class="input-box">
<input class="input-item" type="text" placeholder="最高价格">
</p>
</div>

.input-wrap{
float: left;
}
.input-box {
padding: 0.1rem 0;
width: 2.2rem;
text-align: center;
border: 1px solid #ebebeb;
border-radius: 3px;
.input-item {
width: 100%;
height: .36rem;
line-height: .36rem;
font-size: .26rem;
&::-webkit-input-placeholder {
height: .36rem;
line-height: .36rem;
text-align: center;
font-size: .24rem;
color: #999;
}
}
}