文章/答案/技术大牛

发布

社区首页 >问答首页 >Android Chrome中的"text-underline-position: under“不起作用

问Android Chrome中的"text-underline-position: under“不起作用
EN

Stack Overflow用户

提问于 2021-09-21 14:27:14

回答 1查看 83关注 0票数 -1

下面是一个示例页面：

    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;
    }

<html dir="rtl" lang="fa">
<header>
    <img src="logo.png" alt="Logo">
  </header>
  <main>
    <ul>
      <li><a href="https://chat.whatsapp.com/LyXl3gwellfIiB2V9JJXRy" title="گروه اطّلاع‌رسانی">گروه اطّلاع‌رسانی</a></li>
      <li><a href="https://wa.me/message/ZDX7YVUP6NBCJ1" title="ارسال تکالیف">ارسال تکالیف</a></li>
    </ul>
  </main>

它在Android Chrome上看起来不太好，比如下划线被剪断了，并穿过了一些下划线。

这是我在最新版的Chrome93上测试的final result：

css

google-chrome

mobile

android

html

回答 1

Stack Overflow用户

发布于 2021-09-21 23:26:27

我看到文本在往往与下划线相交的字母上被剪切；因此您可以在CSS中使用text-underline-offset property来增加行和文本之间的偏移量：

text-underline-offset = 2px

/* or */
text-underline-offset: 0.1em;

如果你使用像素版本，你可能需要操作一下2px，但请确保在不同的设备上进行测试。

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

如果你改变字体类型，这个问题也可能被解决，因为字体的高度从一种字体到另一种字体不同，所以你可以检查这一点。

为了进一步的研究，check the documentation和这个SO question。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69270700

复制

相似问题

问Android Chrome中的"text-underline-position: under“不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android Chrome中的"text-underline-position: under“不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android Chrome中的"text-underline-position: under“不起作用
EN