html - chrome 移动版 VS chrome 桌面版 : different position of the same element

Question

试图找出为什么 chrome on mobile phone 与 desktop chrome(以及 firefox、edge、opera ). <a>文本在 <div> 中的位置不同容器。

附言。我在屏幕截图上标记了“书籍”以使其更加直观。在桌面 View 上 <a>在中间，在移动设备上 - 到顶部。

桌面:

手机:

HTML:

    <div class="topbar" id="tb-grad">
      <a class="logomain" id="lm-shad">BOOKS & DVD</a>
      <a></a>
      <a></a>
    </div>

CSS:

   .topbar {
      max-width: 600px; 
      font-size: 40px;margin: auto; 
      border-radius: 10px;}

   .logomain {
      font-family: 'Luckiest Guy', cursive;
      font-size: 40px;
      color: yellow;}

Answer 1

我遇到了完全相同的问题，经过多次测试并错过了几个小时后发现 Chrome Mobile X Chrome Desktop 中的字体发生了变化。

我知道我可能来晚了，但如果有人遇到这个问题，请尝试切换用于另一种字体。 Google Fonts 站点可能是为该测试查找字体的好地方。

为您测试一些来源以观察此行为。