安卓app在鸿蒙特定版本 uni-app css的gap属性不生效 但是在这个手机的浏览器又是生效的

安卓app在鸿蒙特定版本 uni-app css的gap属性不生效 但是在这个手机的浏览器又是生效的

开发环境 版本号 项目创建方式
PC MacOS 14.5 CLI
手机 全部
手机厂商 华为
页面类型 vue
vue vue3
打包方式 云端
CLI 4.36

测试过的手机：

图片 图片

示例代码：

display: flex;
flex-direction: column;
gap: 14rpx;

操作步骤：

  1. 【Honor 10，Harmony OS 3.0.0.165】这个设备上
  2. app里：css中的gap样式不生效 ，这个有问题
  3. 浏览器网页：css中的gap样式生效，这个正常

预期结果：

  1. 【Honor 10，Harmony OS 3.0.0.165】这个设备上的app上：css中的gap样式兼容

实际结果：

  1. 【Honor 10，Harmony OS 3.0.0.165】这个设备上的app上：css中的gap样式不生效

bug描述：

  1. 同一个样式 ,在鸿蒙【Honor 10，Harmony OS 3.0.0.165】这个设备上，app没有生效gap，也就是item上下没有间距；
  2. 但是在 这个设备上，浏览器里gap是生效的，也就是item上下有间距

更多关于安卓app在鸿蒙特定版本 uni-app css的gap属性不生效 但是在这个手机的浏览器又是生效的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于安卓app在鸿蒙特定版本 uni-app css的gap属性不生效 但是在这个手机的浏览器又是生效的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个鸿蒙系统特定版本对CSS gap属性的兼容性问题。在Harmony OS 3.0.0.165版本中，系统WebView内核可能未完全支持gap属性，导致uni-app打包的安卓应用无法正常渲染该样式。

建议的解决方案：

  1. 使用margin替代gap属性：
display: flex;
flex-direction: column;
/* gap: 14rpx; */
> * + * {
  margin-top: 14rpx;
}
  1. 或者使用padding结合负边距：
display: flex;
flex-direction: column;
padding-top: 14rpx;
> * {
  margin-top: -14rpx;
}
回到顶部