Safari浏览器中图片上absolute定位SVG播放按钮失效问题咨询

嗨，我之前碰到过一模一样的Safari兼容性坑，结合你给出的代码片段，大概率是这几个常见问题导致的，给你几个针对性的解决方案：

• 先搞定定位上下文
  你的播放按钮用了position: absolute，但如果它的父容器没有设置position: relative，Safari会把页面视口或者上层带定位的元素作为基准来计算位置，肯定会跑偏。给包裹背景图和按钮的父容器加上：

  .testimonial-container {
    position: relative;
    /* 如果是行内元素，再加这个确保容器尺寸和图片一致 */
    display: inline-block;
  }
  

  结构上要把图片和按钮都放进这个容器里，这样按钮的left和top才会相对于背景图来定位。

• 修正透明背景的写法
  你写的background-color: Transparent是大写开头，虽然Chrome和Firefox兼容，但Safari对CSS属性值的大小写更严格，改成标准的小写：

  .Testiomonials-Play {
    background-color: transparent;
  }
  

• 重置Safari按钮的默认样式
  Safari给按钮加了不少默认样式，哪怕你设了border:none，可能还有内边距或者外观干扰，加上这两行彻底重置：

  .Testiomonials-Play {
    -webkit-appearance: none;
    appearance: none;
    padding: 0; /* 去掉默认内边距 */
  }
  

• 检查SVG的渲染兼容性
  如果你的SVG播放按钮是内联的，要确保viewBox属性设置正确（比如<svg viewBox="0 0 24 24">），同时不要省略width和height。如果是用CSS背景图引入SVG，注意background-size的写法，Safari对contain/cover支持没问题，但具体数值要保证单位正确。另外，避免用SVG里一些Safari不支持的CSS特性，比如某些滤镜或者复杂渐变。

• 补全你的图片代码
  你给出的图片代码height=...没写完，要确保图片标签是完整闭合的，比如height="220"（和图片实际高度匹配），否则Safari可能会错误计算容器尺寸，影响按钮定位。

最后给你一个完整的示例结构，你可以参考调整：

<div class="testimonial-container">
  <img class="dexia" src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220- final.png" width="320" height="220" alt="背景图">
  <button class="Testiomonials-Play">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 5v14l11-7z" />
    </svg>
  </button>
</div>

<style>
.testimonial-container {
  position: relative;
  display: inline-block;
}
.Testiomonials-Play {
  position: absolute;
  left: 170px;
  top: 50px;
  background-color: transparent;
  width: 120px;
  height: 50px;
  border: none;
  font-size: 10px;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
}
</style>

试试这些调整，应该就能在Safari里达到和Chrome一致的效果了！

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