iPhone Safari中a标签内×符号垂直对齐问题求助

问题场景 #

在iPhone的Safari浏览器里，通知卡片内<a>标签中的“×”符号无法像桌面端浏览器一样居中显示。相关代码如下：

HTML结构 #

<div class="notification-card" data-non-read="">
  <div class="notification-card-body"></div>
  <a href="#" data-mark-as-read-one="" data-url="report/mark-as-read?id=38634">×</a>
</div>

现有CSS样式 #

.notification-card [data-mark-as-read-one] {
    top: -5px;
    right: -6px;
    width: 15px;
    height: 15px;
    color: white;
    line-height: 1;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    background-color: #d10e00;
    display: inline-block;
}

可行解决方案 #

Safari对特殊字符的排版逻辑和其他浏览器存在差异，尤其是小尺寸容器内的垂直居中问题，可尝试以下方案修复：

• 调整行高匹配容器高度
  将line-height: 1改为line-height: 15px，让行高与容器高度完全一致，配合text-align: center实现精准居中：

  .notification-card [data-mark-as-read-one] {
      top: -5px;
      right: -6px;
      width: 15px;
      height: 15px;
      color: white;
      line-height: 15px; /* 修改行高 */
      text-align: center;
      position: absolute;
      border-radius: 50%;
      background-color: #d10e00;
      display: inline-block;
  }
  

• 改用Flex布局实现居中
  利用Flex布局的原生居中属性，彻底规避字符排版差异问题：

  .notification-card [data-mark-as-read-one] {
      top: -5px;
      right: -6px;
      width: 15px;
      height: 15px;
      color: white;
      position: absolute;
      border-radius: 50%;
      background-color: #d10e00;
      display: flex; /* 切换为Flex布局 */
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
  }
  

• 替换为SVG图标（彻底解决字符兼容问题）
  如果特殊字符的排版问题始终无法消除，可用SVG图标替代“×”，SVG在各浏览器中的渲染一致性更强：

  <a href="#" data-mark-as-read-one="" data-url="report/mark-as-read?id=38634">
    <svg width="8" height="8" viewBox="0 0 8 8" fill="white">
      <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </a>
  

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