样式代码如下:
.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;