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