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

Question

Trying to find an answer to why chrome on mobile phone shows the same code differently than desktop chrome (and firefox, edge, opera). The <a> text has a different position in <div> container.

PS. Ive marked "BOOKS" on the screenshots to make it more visual. On desktop view <a> is in the middle, on mobile - to the top.

desktop:

mobile:

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

I went through the exact same problem and after many tests and missed hours found that fonts change in Chrome Mobile X Chrome Desktop.

I know i may have arrived late, but if anyone experiences this problem try switching the font used for another. A good place to find fonts for this test may be the Google Fonts site.

Test some sources for you to observe this behavior.

Answer 2

If you wish, you can control the highlight colors using the following:

::selection {
  background:#BBD3FD;
}

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

This will ensure that the background color of the highlighted segment is the same across all devices. #BBD3FD is the pale blue that Google Docs uses for its highlight background.