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页面都没有问题;看了饿了么、美团外卖等小程序,页面上的标签 也有这类情况,故而认为是小程序兼容性未做好,希望尽快优化,谢谢。
@弟弟 你的代码去掉 line-height 那行的注释之后没有发现问题。
问题中的代码不能直接复现这个问题。调整一下之后,推断可能是触发了 android 的最小字体大小限制,因而字体变大了,导致没有竖直居中。
如果楼上的其他开发者也有类似的问题,麻烦提供一下边框和框内文字的样式定义,以及测试用的机型。谢谢!
应该是 android 上处理字符和边框布局的时候的一个问题。因为排版并不完全是小程序框架本身实现的,可能我们也不能完美解决。我们会尽力处理一下。
如果可能的话,麻烦提供一下边框和框内文字的样式定义,以及测试用的机型。
图中有样式可以看下,测试的机型是一加5 、华为mate10
那请提供一下能复现问题的简单代码示例,包括wxml、wxss、js。
你好,麻烦试下px布局有没有问题?
我先公众号也有这个问题 在开发者工具都没问题 在安卓手机就不行。第一个图是开发者工具上的, 第二个图是安卓手机
同样遇到的这样的问题 请问现在解决了吗?
父元素是flex布局的,然后样式是
font-size: 20rpx;
color: #ffffff;
background: #fe892f;
border-radius: 100rpx;
height: 36rpx;
// line-height: 36rpx;
padding: 0 15rpx;
安卓测试机:oppoR9,红米,华为都出现,苹果是正常能居中的
@LastLeaf 我提问题时不是写的很清楚了么。。。
固定字的干脆做成图片