html - 单击 IOS 设备后按钮图标消失

Question

我已经为文本创建了一个带有 span 的按钮，并且我已经添加了 background-image 到 span。在 Ios 设备中，当我点击按钮时，背景图像消失。

.button {
    width: 210px;
    height: 34px;
    border-radius: 20px;
    background-color: #B5D676;
    border: 1px solid #587F54;
    color: #325c46;
    outline: none;
    cursor: pointer;
}

.button span {
    font-size: 1em;
    font-family: ptsans-bold, sans-serif;
    padding-left: 40px;
    display: inline-block;
    height: 25px;
    background-position: left center;
    background-repeat: no-repeat;
}

.button span.link {
    background-image: url(../images/icon-link.png);
}

<button type="submit" value="Continue" class="button">
   <span class="link">
      @SharedLocalizer["ContinueText"]
   </span>
</button>

为什么会这样？

Answer 1

我创建了一个代码笔，但它仍然有效

我补充说background-size: 100% 查看所有图片

参见代码笔 https://codepen.io/anon/pen/xjVbqQ