CSS - aspect-ratio:在Safari浏览器中不工作

CSS的aspect-ratio属性用于设置元素的宽高比。然而，在Safari浏览器中，aspect-ratio属性可能不起作用。这是因为Safari浏览器对于aspect-ratio属性的支持存在一些限制。

解决这个问题的方法是使用其他CSS属性来实现相同的效果。以下是一种解决方案：

1. 使用padding-top或padding-bottom属性来设置元素的高度，然后使用width属性来设置元素的宽度。通过调整padding-top或padding-bottom的值，可以实现不同的宽高比。

示例代码如下：

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9宽高比 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在上面的示例中，容器元素的宽度被设置为100%，而padding-top属性被设置为56.25%。这将创建一个16:9的宽高比。然后，内容元素使用绝对定位来填充容器元素。

1. 使用伪元素来创建一个占位符，然后使用padding-top或padding-bottom属性来设置占位符的高度，再使用绝对定位将实际内容放置在占位符内。

示例代码如下：

.container {
  position: relative;
  width: 100%;
}

.container::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9宽高比 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在上面的示例中，容器元素使用相对定位，并使用伪元素::before创建一个占位符。占位符的高度通过padding-top属性来设置。然后，内容元素使用绝对定位来填充占位符。

这些解决方案可以在大多数现代浏览器中正常工作，包括Chrome、Firefox和Edge等。然而，由于Safari浏览器的限制，aspect-ratio属性可能无法在其中正常工作。