以下是示例页面:

在Android Chrome上看起来不太好，即下划线被切掉并交叉了一些下划线。

以下是最终结果，我在最新版本的Chrome 93上测试了它:

顺晟科技：

我看到文本是在倾向于与下划线相交的字母上剪切的；因此，可以在CSS:

    html,
    body {
      margin: 0;
      padding: 0;
    }

    header {
      padding: 16px 0;
      text-align: center;
      background: black;
    }

    header img {
      width: 234px;
      height: 222px;
      vertical-align: bottom;
    }

    li {
      background: url('images/WhatsApp.png') no-repeat right;
      padding: 30px 50px;
      list-style: none;
    }

    a {
      font: bold 32px Calibri;
      color: black;
      text-underline-position: under;
    }

如果您使用的是pixel版本，您可能需要稍微操作一下2px，但请确保在不同的设备上测试。

确保如果您增加了这个偏移量，那么您将使它们与文本相交，以防您有多行文本。我建议在单行文本上使用它，这已经是您的情况了。

如果更改字体类型，这个问题也可能得到解决，因为字体的高度在不同字体之间是不同的，所以您也可以检查这个问题。

有关进一步研究查看文档，以及so提问.