仅在Safari上单击/选择元素时，行高会发生变化

如何解决仅在Safari上单击/选择元素时，行高会发生变化

我为wordpress子主题创建了一些自定义CSS代码。我正在使用的设计显然可在所有浏览器上使用：

但是，如果我单击或选择该元素，我会产生一种奇怪的效果，仅在Safari上：

这里是Codepen，我在其中复制了行为。

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<div class="credit-container">
  <div class="credit-label-container"><a class="credit-a" target="_blank" href="https://www.example.com/">
      <div class="credit-link">director<br>of photography</div>
      <div class="credit-name">Vilmos Zsigmond</div>
    </a></div>
</div>

CSS

/* PARENT THEME */
* {
  line-height: 1.6em;
}

/* CUSTOM */

.credit-container {
  padding: 0;
  font-size: 30px;
  display: inline-block;
  margin: 0 3px;
  cursor: crosshair;
  color: #000;
  font-family: "Bebas Neue",sans-serif;
  line-height: 1em;
  text-transform: uppercase;
  position: relative;
}

.credit-label-container {
  display: inline-block;
  height: 100%;
  margin: 0 5px;
  padding: 0;
  margin: 0;
  line-height: 1.6em;
}

.credit-a {
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 1.6em;
}
.credit-link {
  line-height: 12px !important;
  font-size: 40%;
  opacity: 0.65;
  margin: 0 5px;
  text-align: right;
  padding: 0;
}

.credit-name {
  line-height: 26px !important;
  display: inline-block;
  padding: 0;
  margin: 0;
}

提示/可能的解决方案：

在我看来，Safari分配了line-height选择器中先前全局定义的*属性。

但是，我不能在不弄乱整体设计的情况下将其删除，因为该属性属于父主题并且会影响太多元素。我应该只更改自定义属性。

这可能是字体渲染问题吗？