Ios iPhone 5+中的图标定位关闭，桌面和其他移动设备上的图标定位良好

我有一个图标连接到跨度的：before，例如：

<div class="user">
    <a href="/Account/SignIn?returnUrl=%2FSearch%3FcategoryId%3DAll%2BProducts%26criteria%3Dbike">
        <span class="fa fa-user"></span>
    </a>
</div>

span.fa-user:before {
  color: #40bf40;
  font-size: 28px;
  position: absolute;
  top: 6px;
  left: -7px;
}
.fa-user:before {
  content: "\f007";
}
.top-bar .user {
  float: right;
  background-color: #3f4651;
  top: 5px;
  position: absolute;
  right: 55px;
  bottom: 5px;
  width: 40px;
}
nav ul:not(.side-nav) li a {
  padding: 0 16px;
}

这是它在桌面和Android中的外观绿色用户图标：

但在iPhone上，图标的位置是错误的：

为什么仅仅在iPhone上定位就错了

---

编辑：我添加了周围的HTML以及样式和css

你能显示提供灰色背景的HTML和css代码吗？我的直觉告诉我，除了像素之外，还有一些其他单位的尺寸。我编辑了这个问题，将其周围的HTML包含在内。它在上使用了padding:01em，但我将其更改为16px，这并没有解决问题。