Ios Safari中的CSS故障，Ionicons作为背景内容和绝对位置

我用SASS（指南针）创建了我的第一个网站，我非常喜欢它，它是一个非常方便的工具。我还添加了令人敬畏的字体，并经常使用它，因为我想优化播放效果，因此使用更少的图形

我正在处理的项目涉及在线反馈和讨论，因此我想在两个栏中放置一个“+”和“-”符号作为背景：

这是“+”符号的代码：

.bar {
  height: 3em;
  background: lighten($pro-color, 20);
  position: relative;
  @extend %global-border-radius;
  margin-bottom: $margin / 2;
  &:before {
    position:absolute;
    top: -14px;
    right: 4px;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    }
  .inner {
    position: absolute;
    background: $pro-color;
    text-align: right;
    color: #fff;
    font: 300 2.25em $font-primary;
    padding: 0 10px;
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 8%;
    @extend %global-border-radius;
  }
}

问题是在Safari中（尤其是在iOS上），图标的位置很奇怪。我试图改变各种参数，但都不起作用。在Chrome、Firefox等浏览器中一切正常

有什么建议吗？

---

谢谢各位

我查看了iOS上的Safari和Chrome，看起来你们只需要稍微摆弄一下就可以了 CSS，这可能是一个立场问题。请参阅代码中“.bar”的选择器，并检查伪元素的位置

你可以在“+”（同样的想法也适用于“-”）中尝试这一点

---

解决了它

---

特别设置线条高度很重要：）

问题是什么（“它看起来很奇怪”是一个糟糕的描述）？从你提出问题的方式来看，问题在于Sass或FontAwesome。@cimmanon是的，你是对的。但因为我不能发布任何截图，所以很难描述…对于那些不知道的人，可以在“谢谢你的回复”中找到inoicons字体系列中任何图标的“内容”属性！我尝试了你发布的代码，结果显示完全相同：/但是我发现如果我使用“坐标”top:-17和right:5px，它在Safari中看起来很好，而top:-13和right:4px在Chrome中显示相同的结果（都在桌面上）对任何人都没有帮助吗？:（请尝试删除此属性“Position:absolute；top:0；right:0”的值，现在使用属性Position:relative；float:right；margin top:-10px；有时绝对位置在浏览器中很棘手。）

&:before {
  position:absolute;
    top: 0;     // set positionings as zero
    right: 0;
    font-size: 5em;
    color: #f8f8f8;
    content: "\f1c9";
    font-family: ionicons;
    margin-top: -13px;    //fiddle around with the margins
    margin-right: 4px;
}