Safari位置绝对在图像上出现问题

Question

我有一个图像作为背景，SVG播放按钮覆盖它。它在Chrome Firefox中运行良好，但是当我在Safari中查看它时，它无法正常工作，因为它可以像Chrome一样工作

在Safari中不起作用

  .Testiomonials-Play{
     position: absolute;
     left: 170px;
     top:50px;
     background-color: Transparent;
     width: 120px;
     border:none;
     height: 50px;
     font-size: 10px;





  }

                  <img class = "dexia" 
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220- 
final.png" width = "320" height="220" />

<button class = "btn btn-primary Testiomonials-Play" > <svg  width = 
"50px" height = "120px"  version="1.1" id="Layer_1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 452 472" style="enable-background:new 0 0 452 472;" 
xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;}
  .st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
  C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
  c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
  c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
  c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button> 

Answer 1

希望这会帮助你。首先从svg中删除内联样式，在这里我认为你在上面发布的标记中缺少一个父relative容器。请检查更新的代码段。也检查了浏览器。

＆＃13;

＆＃13;

.Testiomonials-Play{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50% , -50%);
     background-color: Transparent;
     width: auto;
     border:none;
     height: auto;
  }

svg {
width: 50px;
}

div {
position: relative;
display: inline-block;
}

＆＃13;

<div>

<img class = "dexia" 
src="https://www.blueface.com/wp-content/uploads/2018/03/dexia-320x220- 
final.png" width = "320" height="220" />

<button class = "btn btn-primary Testiomonials-Play" > <svg  version="1.1" id="Layer_1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 452 472" style="enable-background:new 0 0 452 472;" 
xml:space="preserve">
<style type="text/css">
  .st0{fill:#FFFFFF;}
  .st1{fill:#00B6F1;}
</style>
<path class="st0" d="M223.7,456.8c115.6,0.9,214.4-92,215.6-212.3c1.2-122.8-94.7-213.1-204.9-217.9
  C105.9,21.1,10.3,122.1,8.6,238.1C6.9,361.4,106.6,457.4,223.7,456.8z"/>
<path class="st1" d="M223.7,456.8C106.6,457.4,6.9,361.4,8.6,238.1c1.6-115.9,97.3-217,225.8-211.4
  c110.2,4.7,206.1,95.1,204.9,217.9C438.1,364.7,339.3,457.7,223.7,456.8z M169,245.3c0,25.3-0.1,50.6,0,76
  c0.1,12,7.7,16.4,17.8,10.5c43.4-25.4,86.8-50.8,130.1-76.3c9.8-5.8,9.6-14.7-0.2-20.5c-10.9-6.4-21.8-12.8-32.7-19.2
  c-32.3-18.9-64.6-37.9-96.9-56.8c-9.9-5.8-17.5-1.6-18,9.8c-0.1,1.7,0,3.3,0,5C169,197.7,169,221.5,169,245.3z"/>
</svg>
</button>
</div>

＆＃13;

＆＃13;

＆＃13;