为什么小程序 input 样式在真机上会错乱?
微信版本号:7.0.15,系统 iOS 14。
问题截图:
问题描述:开发工具上显示是正确的,真机上观察到如上错位。经真机调试,发现是 input 组件高度样式发生了莫名其妙的变化。已确定不是全局样式导致的。
代码片段:
<!-- wxml -->
<view class="search-bar__container">
<view class="search-bar row">
<view class="search__icon">
<image src="/image/icon_search.png" />
</view>
<view class="search__input">
<input value="{{contactName}}" bindinput="changeInput" bindconfirm="queryConfirm" placeholder="请输入供应商、委托方或收货方名称" confirm-type="search" placeholder-style="color:#808080;" />
</view>
<view class="search__padding" />
</view>
</view>
/* wxss */
.search-bar__container {
flex: 1;
height: 56rpx;
padding: 12rpx 24rpx 12rpx 24rpx;
}
.search-bar {
width: 100%;
height: 56rpx;
background-color: #e5e5e5;
border-radius: 12rpx;
}
.search__icon {
width: 56rpx;
height: 56rpx;
position: relative;
}
.search__icon image {
width: 28rpx;
height: 28rpx;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.search__input {
flex: 1;
}
.search__input input {
width: 100%;
height: 56rpx;
display: inline;
line-height: 56rpx;
font-size: 28rpx;
color: #333;
}
3 回复
弄一个 [ 能复现问题的简单的 ] 代码片段,我帮你看看
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html