如何解决Safari中Flex容器内Inline SVG单像素尺寸变化的对齐偏移问题

问题描述 #

容器内有两个被<stop-icon>虚拟标签包裹的inline SVG，两者尺寸仅相差1像素，预期都能在容器内居中对齐，但在Safari浏览器中其中一个SVG会出现轻微偏移。需要找到一种方法，确保无论SVG尺寸如何，都能在Safari中保持完美居中。

解决方案 #

Safari对flex布局中非整数尺寸元素的对齐逻辑存在偏差，可通过以下几种简单方式修复：

方法1：给SVG添加垂直对齐属性 #

直接为SVG设置vertical-align: middle，强制其在容器内垂直居中：

.cancel-icon svg {
  width: 21px;
  height: 21px;
  vertical-align: middle; /* 新增 */
}

方法2：完善flex容器的居中配置 #

既然.cancel-icon已经使用flex布局，补充justify-content: center，确保SVG在容器内水平+垂直双向居中：

.cancel-icon {
  display: flex;
  padding: 0 5px;
  align-items: center;
  justify-content: center; /* 新增 */
}

方法3：统一容器尺寸（可选） #

如果设计允许，给所有.cancel-icon设置固定宽高，让SVG在固定容器内居中，彻底避免尺寸差异带来的对齐问题：

.cancel-icon {
  display: flex;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  width: 30px; /* 固定宽度 */
  height: 30px; /* 固定高度 */
}

修改后的完整代码 #

CSS #

.content-wrapper {
  display: flex;
  border: 1px solid;
  font-size: 16px;
  font-weight: bold;
  border-radius: 36px;
  background: #FFFFFF;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.24);
}

.timer-text {
  display: flex;
  align-items: center;
  color: #313131;
  min-width: 8ch;
  padding-left: 5px;
}
  
.cancel-icon {
  display: flex;
  padding: 0 5px;
  align-items: center;
  justify-content: center; /* 新增水平居中 */
}

.cancel-icon svg {
  width: 21px;
  height: 21px;
  vertical-align: middle; /* 新增垂直对齐 */
}

.cancel-icon.inline2 svg {
  width: 22px;
  height: 22px;
}

HTML #

<div class="content-wrapper">
  <div class="timer-text">
    <div>00:00:23</div>
  </div>
  <stop-icon class="cancel-icon inline1">
    <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.5 24.75C11.9062 24.75 10.425 24.4641 9.05625 23.8922C7.6875 23.3203 6.49687 22.5281 5.48438 21.5156C4.47187 20.5031 3.67969 19.3125 3.10781 17.9437C2.53594 16.575 2.25 15.0938 2.25 13.5C2.25 11.925 2.53594 10.4531 3.10781 9.08437C3.67969 7.71562 4.47187 6.525 5.48438 5.5125C6.49687 4.5 7.6875 3.70313 9.05625 3.12188C10.425 2.54063 11.9062 2.25 13.5 2.25C15.075 2.25 16.5469 2.54063 17.9156 3.12188C19.2844 3.70313 20.475 4.5 21.4875 5.5125C22.5 6.525 23.2969 7.71562 23.8781 9.08437C24.4594 10.4531 24.75 11.925 24.75 13.5C24.75 15.0938 24.4594 16.575 23.8781 17.9437C23.2969 19.3125 22.5 20.5031 21.4875 21.5156C20.475 22.5281 19.2844 23.3203 17.9156 23.8922C16.5469 24.4641 15.075 24.75 13.5 24.75ZM13.5 23.0625C16.2188 23.0625 18.4922 22.1484 20.3203 20.3203C22.1484 18.4922 23.0625 16.2188 23.0625 13.5C23.0625 10.7812 22.1484 8.50781 20.3203 6.67969C18.4922 4.85156 16.2188 3.9375 13.5 3.9375C10.7812 3.9375 8.50781 4.85156 6.67969 6.67969C4.85156 8.50781 3.9375 10.7812 3.9375 13.5C3.9375 16.2188 4.85156 18.4922 6.67969 20.3203C8.50781 22.1484 10.7812 23.0625 13.5 23.0625ZM10.125 17.7188H16.875C17.1187 17.7188 17.3203 17.6391 17.4797 17.4797C17.6391 17.3203 17.7188 17.1187 17.7188 16.875V10.125C17.7188 9.88125 17.6391 9.67969 17.4797 9.52031C17.3203 9.36094 17.1187 9.28125 16.875 9.28125H10.125C9.88125 9.28125 9.67969 9.36094 9.52031 9.52031C9.36094 9.67969 9.28125 9.88125 9.28125 10.125V16.875C9.28125 17.1187 9.36094 17.3203 9.52031 17.4797C9.67969 17.6391 9.88125 17.7188 10.125 17.7188Z" fill="#313131"/>
    </svg>
  </stop-icon>
  <stop-icon class="cancel-icon inline2">
    <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.5 24.75C11.9062 24.75 10.425 24.4641 9.05625 23.8922C7.6875 23.3203 6.49687 22.5281 5.48438 21.5156C4.47187 20.5031 3.67969 19.3125 3.10781 17.9437C2.53594 16.575 2.25 15.0938 2.25 13.5C2.25 11.925 2.53594 10.4531 3.10781 9.08437C3.67969 7.71562 4.47187 6.525 5.48438 5.5125C6.49687 4.5 7.6875 3.70313 9.05625 3.12188C10.425 2.54063 11.9062 2.25 13.5 2.25C15.075 2.25 16.5469 2.54063 17.9156 3.12188C19.2844 3.70313 20.475 4.5 21.4875 5.5125C22.5 6.525 23.2969 7.71562 23.8781 9.08437C24.4594 10.4531 24.75 11.925 24.75 13.5C24.75 15.0938 24.4594 16.575 23.8781 17.9437C23.2969 19.3125 22.5 20.5031 21.4875 21.5156C20.475 22.5281 19.2844 23.3203 17.9156 23.8922C16.5469 24.4641 15.075 24.75 13.5 24.75ZM13.5 23.0625C16.2188 23.0625 18.4922 22.1484 20.3203 20.3203C22.1484 18.4922 23.0625 16.2188 23.0625 13.5C23.0625 10.7812 22.1484 8.50781 20.3203 6.67969C18.4922 4.85156 16.2188 3.9375 13.5 3.9375C10.7812 3.9375 8.50781 4.85156 6.67969 6.67969C4.85156 8.50781 3.9375 10.7812 3.9375 13.5C3.9375 16.2188 4.85156 18.4922 6.67969 20.3203C8.50781 22.1484 10.7812 23.0625 13.5 23.0625ZM10.125 17.7188H16.875C17.1187 17.7188 17.3203 17.6391 17.4797 17.4797C17.6391 17.3203 17.7188 17.1187 17.7188 16.875V10.125C17.7188 9.88125 17.6391 9.67969 17.4797 9.52031C17.3203 9.36094 17.1187 9.28125 16.875 9.28125H10.125C9.88125 9.28125 9.67969 9.36094 9.52031 9.52031C9.36094 9.67969 9.28125 9.88125 9.28125 10.125V16.875C9.28125 17.1187 9.36094 17.3203 9.52031 17.4797C9.67969 17.6391 9.88125 17.7188 10.125 17.7188Z" fill="#313131"/>
    </svg>
  </stop-icon>
</div>

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