解决小程序textarea在安卓和ios上padding不一的问题

1.做小程序表单的时候上下要对齐一个文本域和input输入框,没想到小程序的textarea在android和ios上差距这么明显,如下图,本来之前遇到这个问题的时候,设置了margin和padding之后就解决了,但是在小程序上发现设置padding和margin设置为0也没用,还是去不掉android和ios表现不一的问题,于是研究了一番还是给收拾好了,下面先上问题图:

android端显示样子
ios端显示样子

从上面两图可以看出来这个文本域差别也太大了,这效果要是说一样的话也太牵强了,于是调整了下margin、padding的,发现并没有什么用,而且这个textarea的间距在ios上大的有点离谱了,即使android和ios不要求一样,但是单一个ios上面的间距也是明显的大,难看,好,下面写下自己的解决办法,先上两张效果图

android端效果图
ios端效果图

下面写实现过程:

js文件:

Page({

  data: {

    detail:false,

  },

  onLoad: function (options) {

    var phone = wx.getSystemInfoSync();  //调用方法获取机型

    var that = this ;

    if (phone.platform == 'ios') {

      that.setData({

        detail: true

      });

    } else if (phone.platform == 'android') {

      that.setData({

        detail: false

      });

    }

  },

  onReady: function () {

  },

  onShow: function () {

  },

  onHide: function () {

  },

  onUnload: function () {

  },

  onPullDownRefresh: function () {

  },

  onReachBottom: function () {

  },

  onShareAppMessage: function () {

  }

})

wxml文件:

<view class='xingdongDescript'>

<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>

<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea'  : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>

wxss文件:

.xingdongDescript{

  background: white;

  padding: 0 0 0 30rpx;

  box-sizing: border-box;

  width: 100%;

  height: 285rpx;

}

.xingdongNameBox{

  width: 100%;

  height: 88rpx;

  overflow: hidden;

  padding: 0 20rpx 0 0;

  box-sizing: border-box;

  border-bottom: 1rpx solid #E5E5E5;

}

.xingdongNameBox view{

  width: 25%;

  height: 88rpx;

  line-height: 88rpx;

  float: left;

  color: #000000;

  font-size: 34rpx;

}

.xingdongNameBox input{

  width: 75%;

  height: 88rpx;

  line-height: normal;

  float: left;

  font-size: 34rpx;

  color: #000000;

}

.xingdongjieshaoBox{

  width: 100%;

  height: 197rpx;

  overflow: hidden;

  padding: 0 20rpx 0 0;

  box-sizing: border-box;

  position: relative;

}

.xingdongjieshaoBox .xingdongjieshao{

  width: 25%;

  height: 88rpx;

  line-height: 88rpx;

  float: left;

  color: #000000;

  font-size: 34rpx;

  position: absolute;

  top: 0;

  left: 0

}

.iostextarea{

  position: absolute;

  left: 24.3%;

  top: 1rpx;

  margin-left: -11rpx;

  width: 73%;

  height: 197rpx;

}

.iostextarea textarea{

  position: absolute;

  width: 100%;

  height: 100%;

  font-size: 34rpx;

}

.androidtextarea{

  position: absolute;

  left: 24.3%;

  width: 73%;

  height: 197rpx;

}

.androidtextarea textarea{

  width: 100%;

  height: 197rpx;

  float: left;

  padding: 22rpx 0 0 0;

  box-sizing: border-box;

  font-size: 34rpx;

}

至此,实现想要的效果。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,103评论 1 91
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 4,332评论 2 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 2,162评论 0 10
  • “ 我相信我可以等到他长大的那天。” ——题记 2002...
    Ansens62296阅读 130评论 0 0
  • 最近是看哲学看多了吗?老做梦,关键是做梦都是在论辩
    海经春深阅读 77评论 0 0