a标签样式的一个兼容性问题

今天写样式的时候，发现了一个a标签css样式的兼容性问题，我们来看实际的代码：

<a href="sign-up.html" class="sign-up-btn center">报名加入</a>

.sign-up-btn {
  display: block;
  width: 5rem;
  height: 2.0666666666666667rem;
  line-height:2.0666666666666667rem;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background: url("../img/sign-up-btn-link.png") no-repeat center center;
  background-size: 4rem 1.0666666666666667rem;
  border: 1px solid #0ab0ea;
}
.sign-up-btn:hover {
  background: url("../img/sign-up-btn-hover.png") no-repeat center center;
  background-size: 4rem 1.0666666666666667rem;
}

这个a标签在苹果手机上点击进入sign-up.html这个页面之后再返回回来竟然显示不了背景图片，而且只有苹果手机显示不了，安卓没有问题，我尝试很多种设置，都没有用。

后来，虽然不知道为什么在苹果手机上显示不了背景图片，但我找到了另一种方法来解决。

.sign-up-btn {
  display: block;
  width: 4rem;
  height: 1.0666666666666667rem;
  line-height:1.0666666666666667rem;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #3558ea;
  background: url("../img/sign-up-btn-bg.png") no-repeat 0 0;
  background-size: 100%;
}
.sign-up-btn:hover {
  text-decoration: none;
  color: #3558ea;
  background-position: 0 -55px;
  background-size: 100%;
}

把之前的两张图片拼在一起，只在.sign-up-btn {}里面加图片，这样就不会出现这种问题。虽然解决了问题，但却不知道为什么。希望以后我能弄明白原因。