微信小程序Button内容有滚动条问题定位解决

小程序界面中写了一个button样式，发现button的内容可以滚动。

样式代码如下：

.shareRightButton {

width: auto;

height: 100rpx;

line-height: 100rpx;

flex: 1;

text-align: center;

font-size: 36rpx;

margin-left: 15rpx;

margin-right: 30rpx;

background-color: #0057a3;

color:#fff;

border-radius: 50rpx;

border: 2rpx solid #0057a3;

align-items: center;

justify-content: center;

padding: 0rpx;

}

查找分析中发现，button中设置border无效，并且会影响内容的实际高度，故删除border属性后button上的滚动条消失。

样式修改为如下：

另附上button去掉默认样式的公共样式，可根据自己的情况调整：

写button时务必要加上hover-class="none"；

<button class="shareRightButton" hover-class="none">按钮</button>

/* Button默认样式 */

button::after {

border: none;

}

 

button {

width: 100%;

height: 100%;

position: relative;

display: flex;

margin-left: auto;

margin-right: auto;

padding-left: 0px;

padding-right: 0px;

box-sizing: border-box;

font-size: 18px;

text-align: left;

text-decoration: none;

line-height: 100%;

border-radius: 0px;

-webkit-tap-highlight-color: transparent;

overflow: scroll;

color: #000;

background-color: #fff;

}