微信小程序Button内容有滚动条问题定位解决
发布于 5 年前 作者 xiaping 5309 次浏览 来自 分享

样式代码如下:

.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;

1 回复

我记得 我们最开始只做了一个功能:

回到顶部