chrome移动VS chrome桌面：同一元素的不同位置

Question

试图找到答案，为什么手机上的 chrome 显示的代码与 desktop chrome （以及Firefox，Edge，Opera， ）。 <a>文本在<div>容器中具有不同的位置。

PS。 Ive在屏幕截图上标记了“ BOOKS”以使其更加可视。在桌面视图上，<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桌面中的字体发生了变化。

我知道我可能迟到了，但是如果有人遇到此问题，请尝试切换另一个字体。 Google字体网站可能是找到适合该测试字体的好地方。

测试一些来源以观察这种行为。

Answer 2

如果愿意，可以使用以下方法控制突出显示的颜色：

::selection {
  background:#BBD3FD;
}

::-moz-selection {
  background:#BBD3FD;
}

这将确保突出显示的段的背景色在所有设备上都相同。 #BBD3FD是Google文档用于突出显示背景的淡蓝色。