CSS故障在野生动物园中，带有离子元素作为背景内容和绝对定位

Question

我使用sass（Compass）创建了第一个网站，我真的很喜欢，这是一个非常方便的工具。我还添加了很棒的字体并经常使用它，因为我也想对视网膜进行优化，因此使用较少的图形。

我正在处理在线处理反馈和讨论的项目，因此我想将一个' 'and' - ' - 符号作为两个bar中的背景：https：//www.orat.io/stmt/42

这是" "符号的代码：

.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等的一切都很好

有什么提示吗？谢谢大家

Answer 1

我检查了Safari＆amp;iOS上的铬CSS，这可能是一个位置问题。请参阅您的代码中的" .bar"选择器，然后检查伪元素定位。

您可以为" "尝试此操作（相同的想法for" - "）;

&: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;
}

Answer 2

解决了！特异性设置线路高度很重要：）