文字在Safari瀏覽器上截取

Question

我對 safari 瀏覽器上的一些文本有疑問。 我不知道為什么 safari 瀏覽器上的文本會被剪切，盡管 windows 上的其他瀏覽器上的一切都很好。 我不使用mac，所以我不知道safari有什么不同？

SCSS代碼：

.serv-list {
  background-color: #6947d2;
  display: flex;
  padding: 50px 6vw;
  flex-direction: column;

  .serv-box {
    display: flex;
    align-items: center;
    max-width: 992px;
    margin: 0px;
    height: max-content;

  }

  h2 {
    font-family: "CocoGhoticBold";
    color: $RED_COLOR;
    font-size: 55px;
  }

  p {
    font-family: "Gotham";
    color: $WHITE_COLOR;
    font-size: 25px;

  }

  .right-box {
    text-align: right;
    align-self: flex-end;
  }
}

HTML 代碼：

 <div class="serv-box right-box">
        <div>
          <h2>Script Writting</h2>
          <p>
            Bumping our heads together to make the perfect script for your ads /
            corporate videos and documentaries.
          </p>
        </div>
        <img src="assests/icons/Script.png" alt="" />
      </div>

Answer 1

flex-direction: column在使用填充或邊距時會導致 Safari 中的一些錯誤。 除了flex-direction: column之外，您沒有使用任何 flex 特性.serv-list 。 您可以使用 display: block 獲得相同的結果。 刪除它並設置display: block

.serv-list {
  background-color: #6947d2;
  padding: 50px 6vw;
  display: block;
}

Answer 2

如果我沒記錯的話，問題出在字體上。 某種錯誤，因此它無法在 safari 瀏覽器上正確顯示。 當我改變它時，它似乎一切都很好。