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

最新推荐文章于 2024-07-20 08:51:01 发布

luwenze

最新推荐文章于 2024-07-20 08:51:01 发布

阅读量3.3k

点赞数

文章标签： ios ios11 兼容 input safari

本文链接：https://blog.csdn.net/luwenze/article/details/86164026

版权

本文主要探讨了在iOS11的Safari浏览器中，input标签出现光标错位的问题及其解决办法。内容包括不能直接通过设置input行高或使用特定父元素布局来解决，建议采用适当的CSS调整，如避免使用display: inline-block、浮动、定位或弹性布局，以防止光标位置不正确。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

luwenze

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兼容ios11中safari浏览器input标签光标错位问题

1.不能直接设置input行高为输入框的高度，外部套个盒子用padding去挤；2.如果是多个一排的情况不能直接设置父元素search-box的布局，比如display：inline-block、浮动、定位或者弹性布局等，光标还是会错位，父元素只能是块级元素给父元素再套一个元素input-wrap，该元素用浮动就可以了（试了别的布局方式不可以，应该只能用浮动了）具体写法：情况一...
复制链接

扫一扫