-1

我使用 SASS（Compass）创建了我的第一个网站，我非常喜欢它，它是一个非常方便的工具。我还添加了 Font Awesome 并经常使用它，因为我也想针对 Retina desiplays 进行优化，因此使用更少的图形。

我正在进行的项目处理在线反馈和讨论，因此我想在两个栏内放置一个“+”和“-”符号作为背景：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 等中一切都很好。

有小费吗？多谢你们

4

2 回答 2

1

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

你可以试试这个“+”（同样的想法也适用于“-”）；

&: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;
}
于 2014-01-19T16:12:33.027 回答
1

解决了！ 专门设置行高很重要:)

于 2014-02-25T08:59:27.537 回答