收藏
回答

input 组件高度显示错误的 Bug

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug input 客户端 7.0.4 2.7.1

问题描述


修改 input 的高度不生效

设定 input 高度 18px 实际显示为 25.19 px

审查 input 组件默认 min-height 值为 1.4rem 修改 min-height 值后 input 组件外部高度虽然趋向正常,但 placeholder 显示会错位。

查看框架内部样式 wx-inputwx-input div,wx-input input 设定的 min-height 为 1.4rem 应该是错误的,正确的值可能是 1.4em,另外 wx-input div,wx-input input 不应该写 min-height 为固定值。


问题截图


实际高度错误:


修改后 placeholder 错位(在真机还会导致文字上下滚动):


审查开发者工具发现内部 input 实际高度错误:




代码


<input placeholder='input'></input>
input{
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  background-color: #cccccc;
}


最后一次编辑于  06-14
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    06-14

    麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    06-14
    赞同
    回复 3
  • 铭锋科技
    铭锋科技
    06-14

    这没影响到什么吧,谈BUG说不上,主要看你预期表现是什么,像如下代码我觉得就已经满足我的预期了


    <input placeholder='input' placeholder-class='pc'></input>



    input{

    font-size: 12px;

    line-height: 18px;

    height: 18px;

    min-height:18px;

    background-color: #cccccc;

    padding:5px;

    }

    .pc{

    color: #ff0000;

    }



    06-14
    赞同
    回复 1
    • 瞳player
      瞳player
      06-14

      确实是 Bug,只修改 min-height 值会导致内部 wx-input 元素内部的元素错位

      你有没有注意到截图里的 placeholder 偏上(真机上还能上下滚动)

      06-14
      回复