微信小程序修改button宽高样式的问题

问题

<button class="open-vip">立即开通</button>

html

上面并没有设置size="mini"的值，因为想要自己设置按钮的大小。

.open-vip { position: absolute; right: 100rpx; line-height: 47rpx; top: 20rpx; font-size: 28rpx; border-radius: 100rpx; padding: 0 20rpx; background-color: #343135; color: #e1bb7c; }

css

按照上面设置按钮样式后，在微信开发者工具的模拟器中看到按钮的宽高都正常，但是用手机预览的时候发现按钮的宽度非常不正常。

造成原因

在真机调试中可以看到，button还有一个样式，这个样式貌似只在真机调试中看的到：

解决方法：

所以只需要再写一个button:not([size='mini])样式来覆盖默认的width即可：

.open-vip:not([size="mini"]) { width: 160rpx; }

css