uni-app font-size在2层view下字号偏大 内联样式也不生效

uni-app font-size在2层view下字号偏大 内联样式也不生效

开发环境 版本号 项目创建方式
Windows win10 专业版 HBuilderX

产品分类:uni-app x/App

PC开发环境操作系统:Windows

PC开发环境操作系统版本号:win10 专业版

HBuilderX类型:正式

HBuilderX版本号:4.66

手机系统:Android

手机系统版本号:Android 13

手机厂商:华为

手机机型:荣耀100

页面类型:vue

vue版本:vue3

打包方式:云端

项目创建方式:HBuilderX

示例代码:

示例如下

样式>> .itemmodule { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-left: 11px; padding-right: 11px; margin-bottom: 5px;
}

.itemouter {
height: 66px;
width: 62px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;

.itempic {
height: 25px;
width: 25px;
margin-top: 5px;
}

.itemnote {
width: 62px;
line-height: 24px;
font-size: 13px;
text-align: center;
}
}

ui使用–> <view class="itemmodule"> <view class="itemouter"> <image class="itempic" src="/static/images/services/1.png" mode="aspectFit"></image> <text class="itemnote">请假</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/2.png" mode="aspectFit"></image> <text class="itemnote">销假</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/3.png" mode="aspectFit"></image> <text class="itemnote">统计</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/4.png" mode="aspectFit"></image> <text class="itemnote">下载</text> </view> <view class="itemouter"> <image class="itempic" src="/static/images/services/5.png" mode="aspectFit"></image> <text class="itemnote">快照</text> </view> </view>


## 操作步骤:
上面的代码搞下来弄一下就可以了

## 预期结果:
font-size:13px 正常显示

## 实际结果:
字体偏大1号

bug描述:

font-size字号变大 用内联样式修改也没有作用 整个项目就一个页面 没有css污染

如果把Image标签注释掉字体可以显示正常 如果不注释就不行 或者弄成2行 第一行显图片 第二行显文字 也可以正常 就是组合起来就完蛋 放到最外层的时候可以 用itemouter 及子CLASS是正常的放里面不行 官方查一下吧


更多关于uni-app font-size在2层view下字号偏大 内联样式也不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app font-size在2层view下字号偏大 内联样式也不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app样式继承问题。问题出在嵌套view结构下的字体大小计算方式。

原因分析:

  1. uni-app在Android平台下,嵌套view结构中的text组件会受到父容器的影响
  2. 当text组件与image组件同在一个flex布局中时,系统可能会自动调整字体大小以适应布局

解决方案:

  1. 给text组件添加!important强制样式:
.itemnote {
  font-size: 13px !important;
}
  1. 或者改用rpx单位更稳定:
.itemnote {
  font-size: 26rpx; /* 约等于13px */
}
  1. 也可以尝试给外层view添加固定字体大小:
.itemouter {
  font-size: 13px;
}
回到顶部