Ionic中ion-button在iOS上样式错乱怎么办？

明硕提问于 2026-03-16 21:44:20 阅读 6

移动

我在用Ionic 6开发一个跨平台App，发现同一个ion-button在Android上显示正常，但在iOS模拟器里按钮高度变小、文字挤在一起，看起来特别奇怪。我试过加style="height: 44px"也没用，是不是哪里配置错了？

这是我的按钮代码：

<ion-button expand="block" fill="solid" color="primary">
  登录
</ion-button>

我来解答赞 3 收藏

反馈

1 条解答

Mr-鉴恒 Lv1

这问题是Ionic的iOS模式下的CSS变量没设好，ion-button用fill="solid"时iOS默认样式有坑。

在对应页面的scss文件里加上这个：

ion-button {

  --padding-start: 16px;

  --padding-end: 16px;

  --padding-top: 12px;

  --padding-bottom: 12px;

  min-height: 44px;

}

或者全局修复的话写到global.scss里。

如果上面还不行，试试把fill="solid"改成fill="outline"或者fill="default"，有时候solid模式在iOS上兼容性就是有点恶心。

还有个偏方就是在按钮外层套个div调样式，不过一般上面那招够用了。

2026-03-17 21:13