uni-app 更新到最新版编辑器 固定底部的按钮多了一层边框

uni-app 更新到最新版编辑器 固定底部的按钮多了一层边框

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

操作步骤：

<view class="btn"><button  type="primary" @click="cancelFn">再次邀约</button></view>  
.btn {  
            padding: 24rpx 30rpx;  
            background-color: #FFFFFF;  
            position: fixed;  
            left: 0;  
            right: 0;  
            bottom: 0;  
}

预期结果：

不应该有边框

实际结果：

有边框

bug描述：

更新到3.3.3之后，按钮fixed到底部会多一层边框

bug图片


更多关于uni-app 更新到最新版编辑器 固定底部的按钮多了一层边框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

新建空项目测试下是否有此问题

更多关于uni-app 更新到最新版编辑器 固定底部的按钮多了一层边框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还是有


请提供简单可复现的示例（上传附件），方便我们快速排查问题哦。

你要把这个示例里面按钮的margin-top去掉

回复 6***@qq.com: 已去掉了，看上方图片，你是其他样式影响了吗，排查下

回复 DCloud_UNI_Anne: 是mac的chrome吗

回复 6***@qq.com: mac的chrome也正常

这是新版 HBuilderX 3.3.3 中引入的样式调整导致的。在之前的版本中，button 组件默认可能没有边框或边框被隐藏，但更新后，当按钮被放置在 position: fixed 的容器内时，可能会触发默认边框样式的渲染。

解决方案：

直接在按钮上添加样式覆盖默认边框即可。修改你的代码，为 button 添加一个类或内联样式来移除边框：

<view class="btn">
  <button type="primary" @click="cancelFn" style="border: none;">再次邀约</button>
</view>

或者通过 CSS 类控制：

<view class="btn">
  <button class="custom-btn" type="primary" @click="cancelFn">再次邀约</button>
</view>

.custom-btn {
  border: none !important;
}
回到顶部