文字在 Safari 浏览器上被剪切答案

【问题标题】：The text is cut on Safari browser文字在 Safari 浏览器上被剪切
【发布时间】：2021-05-10 13:17:25
【问题描述】：

我对 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>

【问题讨论】：

标签： html css macos safari

【解决方案1】：

flex-direction: column 与填充或边距一起使用时会导致 Safari 中的一些错误。除了flex-direction: column 之外，您没有为.serv-list 使用任何弹性功能。您可以使用 display: block 获得相同的结果。删除它并设置display: block

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

【讨论】：

我试过了，但文本仍然被剪切。所以我听了你的意见并尝试删除 align-items: center;在 .serv-box 中。如果我没记错的话，它起作用了。但是你认为这可以解决吗？当然文本会转到顶部，但不再剪切
是的，当我删除 align-items 时它不再剪切，但这不是因为这个。这是因为文本到顶部。当我使用 margin: auto 再次居中居中时，它再次被剪切。

【解决方案2】：

如果我没记错的话，问题出在字体上。某种错误，因此无法在 safari 浏览器上正确显示。当我改变它时，它似乎一切都很好。

【讨论】：