Safari中带内边距容器不遵循aspect-ratio问题求助

你遇到的是Safari对aspect-ratio属性的计算逻辑和Chrome不一致导致的——Chrome会基于元素的内容盒尺寸应用宽高比，而Safari会把padding纳入整体尺寸计算，导致内部元素无法保持正方形。以下是两种可行的解决方案：

方案1：将padding转移到内部元素（推荐） #

把容器的padding移到内部元素上，同时给内部元素设置box-sizing: border-box，确保padding不会撑开元素尺寸，这样容器的aspect-ratio就能正确控制内部元素的正方形比例：

<div class="container">
  <div class="element"></div>
</div>

.container {
  position: relative;
  width: 10vw;
  aspect-ratio: 1;
  background-color: lightskyblue;
}

.element {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: royalblue;
  box-sizing: border-box; /* 让padding包含在元素宽高内 */
}

方案2：用伪元素模拟宽高比（兼容旧版Safari） #

如果需要兼容更旧版本的Safari，可以用传统的padding-top百分比方法来维持宽高比，这种方法不依赖aspect-ratio属性：

<div class="container">
  <div class="element"></div>
</div>

.container {
  position: relative;
  width: 10vw;
  padding: 20px;
  background-color: lightskyblue;
}

/* 用伪元素撑开容器高度，维持1:1宽高比 */
.container::before {
  content: "";
  display: block;
  padding-top: 100%; /* 百分比基于父元素宽度，实现1:1 */
  margin: -20px; /* 抵消容器的padding，让伪元素宽度等于内容区宽度 */
}

.element {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: royalblue;
}

内容的提问来源于stack exchange，提问作者Apnw2