uni-app 新项目按钮 Plain 样式在无其他样式情况下多出两个像素高度

uni-app 新项目按钮 Plain 样式在无其他样式情况下多出两个像素高度

示例代码：

<view>  
    <view style="display: flex;" >  
        <view>  
            <button type="primary">页面主操作 Normal</button>  
        </view>  
        <view>  
            <button type="primary" plain="true">按钮</button>  
        </view>  
    </view>  
</view>

操作步骤：

  • 新建项目，在 index/index 下复制代码示例的结构

预期结果：

  • 两个按钮一样大小

实际结果：

  • plain 为 true 情况下会高出2个像素

bug描述：

新项目，任何其他样式都没有情况下，按钮 Plain 时多出两个像素高度。

信息项 描述
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 正式
HBuilderX版本 2.9.8
浏览器平台 Chrome
项目创建方式 HBuilderX

更多关于uni-app 新项目按钮 Plain 样式在无其他样式情况下多出两个像素高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

不是bug，符合预期，是按微信小程序规范实现的
你既然可以运行到Chrome，自己审查一下样式便知：
xxx-button[plain] {
color: #xxxxxx;
border: 1px solid #xxxxxx;
background-color: transparent;
}

更多关于uni-app 新项目按钮 Plain 样式在无其他样式情况下多出两个像素高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


晕 那难道 像我这个结构下 一个取消 一个确定 按钮 两个按钮就应该不一样大小？ 我下载了 weui 试了 他们本身并不存在这个问题！

回复 8***@qq.com: 晕。。。下载 weui 干什么，你运行到微信小程序审查看下就知道了。

另外样式我都帮你审查了一下复制给你了，你覆盖一下随意修改啊。

回复 8***@qq.com: 还有按钮的样式不因你是确定还是取消而差异，由plain属性影响的。

这是uni-app中button组件plain属性的已知样式问题。当设置plain=true时，按钮会默认添加额外的边框样式，导致高度增加2px。

解决方案：

  1. 直接为plain按钮添加固定高度样式：
<button type="primary" plain="true" style="height:40px">按钮</button>
  1. 或者通过CSS重置按钮的box-sizing：
button[plain] {
    box-sizing: border-box;
    height: 40px; /* 与普通按钮相同的高度 */
}
回到顶部