uni-app 最新版 HB 编译的 css 有问题

uni-app 最新版 HB 编译的 css 有问题

开发环境 版本号 项目创建方式
Mac 11.2.3 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.1.11

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：matepad

页面类型：vue

打包方式：云端

示例代码：

<template>  
    <view class="container" style="margin: 50px; height: 80px;" >  
        <view class="m-textarea-container">  
            <view class="m-textarea-title">  
                标题  
            </view>  
            <textarea class="m-textarea" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style lang="scss" scoped>  
    .m-textarea-container {  
        display: flex;  
        align-items: center;  
        height: 80px;  
        overflow: hidden;  

        .m-textarea-title {  
            margin-left: 0;  
            font-size: 16px;  
            color: black;  
        }  

        .m-textarea {  
            margin: 5px 0 5px 10px;  
            flex: 1;  
            border: 1px solid red;  
            box-sizing: border-box;  
            border-radius: 2px;  
            height: 80px;  
            padding: 5px;  
            color: black;  
            overflow: hidden;  
        }  
    }  
</style>

操作步骤：

直接运行

预期结果：

正常展示

实际结果：

非正常

bug描述：

最新版本的 HB 编译出来的 css 有问题，具体表现为，一个 view 高度设置为 80px，view 中包含 view1 高度设置为 80px，overflow: true，view1 中包含 view2 和 textarea，view2 是文字，textarea 设置高度为 80px，添加 border，上下边线展示不出来，关闭 view1 的 overflow 可显示，给 view1 添加 border，发现 textarea 比 view1 上下高出一块。

border-demo.zip


更多关于uni-app 最新版 HB 编译的 css 有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

没有人回答呢？代码就上面那一点，就能复现。

更多关于uni-app 最新版 HB 编译的 css 有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题确认，已加分，后续修复
临时解决方案：
box-sizing: border-box !important;

昨天刚碰到。我以为是有别的原因官方内置了 !important 只好自己用临时方法解决了。 今天就看到更新提醒了

嗯有原因，不过已经更换方案。

HBuilderX 3.1.13 已修复

textarea双向绑定问题什么时候修复下

https://ask.dcloud.net.cn/question/122239

这是一个已知的 uni-app 编译样式问题。在最新版本中，flex 容器内的 textarea 元素在设置固定高度时可能出现边框渲染异常。

主要问题在于：

  1. textarea 在 flex 布局中高度计算可能不准确
  2. 父容器的 overflow: hidden 会裁剪 textarea 的边框

建议的解决方案：

  1. 移除父容器高度限制
.m-textarea-container {
    display: flex;
    align-items: center;
    /* 移除 height: 80px; */
    /* 移除 overflow: hidden; */
}
  1. 调整 textarea 样式
.m-textarea {
    margin: 5px 0 5px 10px;
    flex: 1;
    border: 1px solid red;
    box-sizing: border-box;
    border-radius: 2px;
    /* 确保高度计算正确 */
    min-height: 80px;
    height: auto;
    padding: 5px;
    color: black;
}
  1. 或者使用固定布局替代 flex
.m-textarea-container {
    position: relative;
    height: 80px;
}

.m-textarea {
    position: absolute;
    left: 60px; /* 根据标题宽度调整 */
    right: 0;
    top: 0;
    bottom: 0;
}
回到顶部