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

1.不能直接设置input行高为输入框的高度,外部套个盒子用padding去挤;
在这里插入图片描述
兼容ios11中safari浏览器input标签光标错位问题_第1张图片
兼容ios11中safari浏览器input标签光标错位问题_第2张图片

2.如果是多个一排的情况
在这里插入图片描述
不能直接设置父元素search-box的布局,比如display:inline-block、浮动、定位或者弹性布局等,光标还是会错位,父元素只能是块级元素
给父元素再套一个元素input-wrap,该元素用浮动就可以了(试了别的布局方式不可以,应该只能用浮动了)
兼容ios11中safari浏览器input标签光标错位问题_第3张图片

具体写法:

情况一:

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

.search-box {
   
	width: 

你可能感兴趣的:(ios,ios11,兼容,input,safari)