如何解决Chrome和Safari之间的高度差？

Question

我看到了多个浏览器之间的高度差异。在Google chrome上，它可以完美运行，但在Safari上，您可以在屏幕截图中看到以下区别：div-screen-chrome

div-screen-safari

这是我的代码：

.player {
        bottom: 0;
        position: fixed;
        width: 100%;
        height: 55px;
        background-color: grey;
        color: white;
        font-family: 'Oswald';
        line-height: 50px;
    }
    
    .next-container {
        position: relative;
        float: right;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 15px;
        height: 55px;
        top: -53px;
        max-width: 50%;
        min-width: 20%;
        background-color: #ffc107;
        color: white;
        line-height: 55px;
        text-align: center;
      }

<div class="player">
  <div class="artist-title-infos">
    <span class="cover"><img class="picture" src="http://my-cover" alt="cover"></span>
    <div class="infos">
      <button class="buttonPlayer notPlaying"><i id="iconPlayer" class="fas fa-play-circle"></i></button>
      <button class="pausePlayer notPaused"><i id="iconPlayer" class="fas fa-pause-circle"></i></button>
      <span class="artist">Now : </span>
      <span class="title">Your song</span>
     </div>
    </div>
   <div class="next-container">
    <span class="next">Next : </span>
    <span class="next next-songs-0">Your song 1</span>
    <span class="next next-songs-1">, Your song 2</span>
    <span class="next next-songs-2"> & Your song 3</span>
   </div>
</div>

如何解决？

谢谢

Answer 1

[不幸的是，我没有留下简单评论所需的分数，我的回答也令人不满意：只要您提供其余的CSS，我期待着使用解决方案对其进行编辑。我也遇到了Safari和相对单位（％和视口）的几个问题，尤其是涉及到前向填充动画时。但是，正如其他人指出的那样，可能只是由于CSS重置而消失了。您遗漏的CSS可能会有帮助。