<text class="test">spends big<text>
.test {
height: 22px;
line-height: 22px;
font-size: 18px;
color: #3d3d3d;
text-align:center;
background: rgba(115, 225, 205, 0.3);
}
- 发布:2024-08-26 19:21
- 更新:2024-08-30 10:38
- 阅读:215
【报Bug】nvue 的 vue3 版本 text 文字显示有偏差,不是水平居中,而 vue2 正常
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 13.5 (22G74)
HBuilderX类型: Alpha
HBuilderX版本号: 4.26
手机系统: Android
手机系统版本号: Android 14
手机厂商: 华为
手机机型: P40
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
分别使用 vue3 和 vue2 的 nvue 使用 text 显示英文短语
分别使用 vue3 和 vue2 的 nvue 使用 text 显示英文短语
预期结果:
vue3 和 vue2 一样文字水平对齐
vue3 和 vue2 一样文字水平对齐
实际结果:
vue3 紧靠底部,这样很影响我们软件的展示效果
vue3 紧靠底部,这样很影响我们软件的展示效果
bug描述:
使用 vue3 的 text 显示文字,字母整体偏下,不是水平居中
<text class="test">spends big<text>
.test {
height: 22px;
line-height: 22px;
font-size: 18px;
color: #3d3d3d;
text-align:center;
background: rgba(115, 225, 205, 0.3);
}
如图所示,图中 p 完全靠底部,而 b 上面还有位置,g 也是紧靠底部
第一张图是 vue2 版本是显示正常的,第二张图是 vue3 版本,用红色标记了不同的位置
iOS 也是一样的情况