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

Question

经过长时间的休息后，我开始尝试使用 webdev，但无法弄清楚为什么 Figcaption 无法在 Safari 中正确显示。

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

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

谢谢 回复

<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;
}

Answer 1

（在此处将the response 添加到类似问题。）

我将display: table 和margin: auto 添加到figure，并将display: table-caption 添加到figcaption。之后似乎两者都可以正常工作。