iPad Safari和PC浏览器中的图像渲染问题

Question

问题：
PC浏览器-预期

iPad渲染

说明：
上图是所有PC和Android浏览器上的预期结果，但是在iPad中，它作为第二张图呈现了错误的结果。
这是下面的代码，我发现如果我在.close-btn中删除宽度和高度，则图像大小将与预期的相同，只是按钮大小仍然不正确。
如果我将按钮替换为div，结果正确吗？
iPad对按钮元素有什么作用？
如果我想继续使用按钮来清晰地显示语义标签，该如何在iPad上进行修改？

/** HTML */
    <button class="close-btn">
         <img src="close-btn.png" />
    </button>

/** CSS */
    .close-btn {
      position: absolute;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      img{
        width: 23.5px;
        height: 23.5px;
      }
    }

Answer 1

尝试将其用于您的.close-btn

-webkit-appearance: none;

因为iPad将按钮和其他控件的外观更改为类似于标准控件。