Safari中的CSS故障与Ionicons作为背景内容和绝对定位

-1

我创建了我的第一个使用SASS（Compass）的网站，我非常喜欢它，它是一个非常方便的工具。我还添加了Font Awesome，并经常使用它，因为我想优化Retina desiplays，因此使用更少的图形。Safari中的CSS故障与Ionicons作为背景内容和绝对定位

我工作的反馈交易和在线讨论，所以我想将一个“+”和项目“ - ”符号作为两个酒吧里面背景：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; 
    } 
}

的问题是，在野生（特别是在iOS）的图标奇怪地定位。我试图改变各种参数，但没有奏效。 Chrome，Firefox等一切都很好。

任何提示？谢谢你们

来源

2014-01-19 user1351482

问题是什么，确切（“看起来很奇怪”是一个不好的描述）？问题出现的方式是Sass或FontAwesome。 – cimmanon

@cimmanon是的，你是对的。但是因为我无法发布任何截图，所以很难形容...... – user1351482

对于那些不知道的人，可以在http://ionicons.com/cheatsheet找到inoicons字体家族中任何图标的'content'属性。 .html –

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

来源

2014-02-25 08:59:27 user1351482

我检查在Safari & iOS版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-19 16:12:33 arnold

感谢您的回复！我试过你发布的代码，它显示了完全相同的结果：/但我发现如果我使用“坐标”_top：-17_和_right：5px_，它在** Safari **中看起来很好，而_top：-13_和_right：4px_在** Chrome **（均在桌面上）显示相同的结果 – user1351482

不能帮助任何人吗？ :( – user1351482

尝试去除该属性“位置：绝对的;顶部：0;右：0”的值和现在使用的属性位置：相对; 浮动：右; 边距：-10px; 有时绝对位置浏览器很棘手 – arnold

Safari中的CSS故障与Ionicons作为背景内容和绝对定位

回答

相关问题