Html 背景色宽度<；figcaption>；在Chrome中工作正常，但在Safari中无法正常显示

在长时间休息后，我开始尝试webdev，无法理解为什么Figcaption不能在Safari中正确显示

我创建了一个网站www.suezre.com，当在Chrome或Firefox figcaption中查看时，图片看起来不错，但在Safari上它需要更多的空间

有什么建议我可以解决这个问题吗

多谢各位 R

（这里补充了一个类似的问题。）

我将

display:table

和

margin:auto

添加到

figcaption

，并将

display:table caption

添加到

figcaption

。从那以后，这两个问题似乎都很好。

（这里添加了一个类似的问题。）

---

我将

display:table

和

margin:auto

添加到

figcaption

，并将

display:table caption

添加到

figcaption

。从那以后，这两个功能似乎都很好。

嗨，托比，非常感谢您的帮助，我尝试过在块和内联块中显示它，但没有在表中显示。它确实解决了问题！非常感谢，我会记下来的，以备将来使用！令人惊叹的。我自己也学到了一些东西；DHi Toby，非常感谢你们，我确实尝试过在块和内联块中显示它，但不是在表中。它确实解决了问题！非常感谢，我会记下来的，以备将来使用！令人惊叹的。我自己也学到了一些东西；D

<figure>
  <img src="../img/budapest_our_home_city.png"/>
  <figcaption>Budapest, our home city</figcaption>
</figure>

figure {
position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  padding:  15px;
  color: white;
  background-color: rgba( 29, 20, 17, .6);
  text-align: right;
  text-transform: uppercase;
  font-size: 1rem;
  width: 100%;
}

.banner img {
    max-width: 100%;
    text-align: center;
    display: block;
    margin: auto;
}