我使用 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 等中一切正常。
有什么建议吗? 谢谢大家
最佳答案
我检查了 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;
}
关于ios - 使用 Ionicons 作为背景内容和绝对定位的 Safari 中的 CSS 故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21216928/