wxml文件内容：
<view class=“userinfo_view”>
<view class=“img_view”>
<image class=“uicon” src="…/images/jiesao3.png"></image>
</view>
<view class=“userandtime_view”>
<view>
<text class=“username”>曹探长</text>
</view>
<view class=“fabutime_view”>
<text class=“fabutime”>2019-11-13 20:00</text>
</view>
</view>
/*出问题的按钮如下*/
<button class=“collectbtn” hover-class=“button-hover”>关注</button
>
</
view>wxss文件内容：
.userinfo_view {
display: flex;
flex-direction: row;
width: 100%;
height: 10%;
padding: 5rpx;
border-top: 1rpx solid #ededed;
border-bottom: 1rpx solid #ededed;
background-color: #fff;
vertical-align: center;
}
.uicon {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
margin: 20rpx;
}
.userandtime_view {
display: flex;
flex-direction: column;
align-content: left;
margin-top: 10rpx;
margin-left: 10rpx;
width: 70%
}
.username {
font-size: 14px;
font-weight: bold;
color: black;
margin-top: 10rpx;
}
.fabutime {
font-size: 12px;
color: gray;
}
.buttom_view{
width: 10%;
justify-content: right;
display: flex;
}/*按钮的效果样式如下*/
.collectbtn {
width: 65px;
height: 45rpx;
text-align: center;
font-size: 20rpx;
border-radius: 30rpx;
line-height:45rpx;
margin-right: 25rpx;
vertical-align: center;
border-width:1rpx;
margin-top: 30rpx;
}
.collectbtn ::after{
border:1px solid #f1f1f1;
}
编译时的效果：
，此效果是想要达到的效果 但点击预览，在手机上查看却变成了如下
备注： 编译时选择的机型和真机是同一个iphone7 plus
强力驱动