Safari浏览器忽略inline-block元素右padding属性的CSS兼容问题

问题现象 #

• 触发场景：<a>标签设置display: inline-block属性，内部嵌套的<span>元素为inline-block类型时，Safari会忽略该链接的右侧padding
• 跨浏览器差异：相同代码在Firefox、Chrome浏览器中渲染表现正常
• 无效方案缺陷：如果给内部<span>添加padding修复Safari下的异常，会导致Firefox、Chrome下元素右侧间距过大
• 现有约束：出现问题的DOM结构由PrimeFaces的speeddial组件自动生成，无法直接修改DOM结构
• 效果参考：各浏览器渲染效果对比截图

可复现代码 #

CSS样式 #

ul{
  width: 200px;
  height: auto;
  list-style: none;
}
li{
  margin-bottom: 1em;
}

a{
  display: inline-block;
  background: red;
  padding: 0 1em;
}

span{
  white-space: nowrap;
}
svg{
  margin-right: 0.5em;
  max-width: 1.25rem;
  vertical-align: bottom; 
}

HTML结构 #

<ul>
  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text one
      </span></a>
  </li>

  <li>
    <a href="#"><span>
        <svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
          <path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
        </svg>
        Link text
      </span></a>
  </li>
</ul>

如有开发者遇到过同类问题，恳请提供可行解决方案。

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