收藏
回答

垂直居中样式多数android机不兼容


BUG表现:

标签文字不垂直居中,偏上。


预期效果:


BUG出现环境及复现:

大部分android机。


正常情况:

ios小程序不会,华为荣耀V10,android 8.0不会。

直接写H5页面不会。


{

    border: 1px solid #1CC2F7;

   border-radius: 0.04rem;

   font-size: 0.12rem;

   display: inline-block;

   height: 0.4rem;

   line-height: 0.38rem;

   padding: 0 0.06rem;

   text-align: center;

   margin-left: 0.16rem;

   color: #1CC2F7;  

}



尝试方法:

尝试用过display:flex,vertical-align: middle,line-height,padding等各种样式解决,无法解决。

开始标签外层用了display:flex,尝试不用,改为float:left定位也不行。


判定结果及期望:

由于同样的样式写法,ios的小程序,h5页面都没有问题;看了饿了么、美团外卖等小程序,页面上的标签 也有这类情况,故而认为是小程序兼容性未做好,希望尽快优化,谢谢。

最后一次编辑于  2018-01-10
回答关注问题邀请回答
收藏

16 个回答

  • LastLeaf
    LastLeaf
    2018-01-19

    @弟弟 你的代码去掉 line-height 那行的注释之后没有发现问题。

    2018-01-19
    有用
    回复
  • LastLeaf
    LastLeaf
    2018-01-18

    问题中的代码不能直接复现这个问题。调整一下之后,推断可能是触发了 android 的最小字体大小限制,因而字体变大了,导致没有竖直居中。


    如果楼上的其他开发者也有类似的问题,麻烦提供一下边框和框内文字的样式定义,以及测试用的机型。谢谢!

    2018-01-18
    有用
    回复
  • LastLeaf
    LastLeaf
    2018-01-18

    应该是 android 上处理字符和边框布局的时候的一个问题。因为排版并不完全是小程序框架本身实现的,可能我们也不能完美解决。我们会尽力处理一下。


    如果可能的话,麻烦提供一下边框和框内文字的样式定义,以及测试用的机型。

    2018-01-18
    有用
    回复 1
    • 八妹
      八妹
      2018-08-04

      图中有样式可以看下,测试的机型是一加5 、华为mate10

      2018-08-04
      回复
  • LastLeaf
    LastLeaf
    2018-01-10

    那请提供一下能复现问题的简单代码示例,包括wxml、wxss、js。

    2018-01-10
    有用
    回复
  • LastLeaf
    LastLeaf
    2018-01-10

    你好,麻烦试下px布局有没有问题?

    2018-01-10
    有用
    回复
  • 八妹
    八妹
    2018-08-04

    我先公众号也有这个问题 在开发者工具都没问题 在安卓手机就不行。第一个图是开发者工具上的, 第二个图是安卓手机


    2018-08-04
    有用
    回复
  • Tbea
    Tbea
    2018-05-03

    同样遇到的这样的问题 请问现在解决了吗?

    2018-05-03
    有用
    回复
  • 陈转弟
    陈转弟
    2018-01-19

    父元素是flex布局的,然后样式是

    font-size: 20rpx;

    color: #ffffff;

    background: #fe892f;

    border-radius: 100rpx;

    height: 36rpx;

    // line-height: 36rpx;

    padding: 0 15rpx;

    安卓测试机:oppoR9,红米,华为都出现,苹果是正常能居中的

    2018-01-19
    有用
    回复
  • 云飞扬
    云飞扬
    2018-01-18

    @LastLeaf 我提问题时不是写的很清楚了么。。。

    2018-01-18
    有用
    回复
  • D
    D
    2018-01-18

    固定字的干脆做成图片

    2018-01-18
    有用
    回复

正在加载...

登录 后发表内容