css - 安卓内嵌H5，padding边距上下不一致

Question

<span>管理员</span>

    border-radius: .07rem;
    padding: .05rem .1rem;
    color: #fff;
    background-color: #EE3120;

PC上是正常的，安卓webview里明显上下边距不一致，除了修改padding top和bottom的值，还有别的解决办法吗

Answer 1

Solved, using button as a container will not cause this problem

Answer 2

Lower versions of Android are not well supported. . .

Answer 3

Remove padding and directly use line-height to set the span height.

Answer 4

<span style="height: 30px;line-height: 30px;display:inline-block;padding:0px 10px;border-radius: 5px;color: #ffffff;background-color: #EE3120;">Try Give it a try</span>
It’s very simple, I wrote it together, it looks like this on the phone

Answer 5

1, reset the vertical alignment of the font; vertical-align: baseline;
2, turn off font optimization; -webkit-text-size-adjust: 100%;
3, set the default font of the device; for example: font-family: sans -serif;

This is basically OK; (except for Android with custom font roms like Meizu)