Question

我正在尝试在IOS 8.3上复制一个错误，我选择了一个复选框，我的箭头的颜色是绿色，但它是黑色的。

这是针对此的IOS错误修复还是这个不支持的内容？

这是我的SASS / css：

input[type="checkbox"] + .field-label-replaced {
    &:before {
        background-color: $C-Bg-Field;
        border:           1px solid $C-Border; // Use px value to cope with field edges disappearing when zooming out
        box-sizing:       border-box;
        color:            $GIP-OxfamGreen;
        content:          '';
        height:           $D-FieldElement;
        text-align:       center;
        width:            $D-FieldElement;
    }
}

input[type="checkbox"]:checked + .field-label-replaced {
    &:before {
        color:            $GIP-OxfamGreen;
        content:            '\2714';
    }
}

如果你想自己测试一下我有一个显示问题的codepen帐户。

http://codepen.io/mattclaffey/pen/EjNwRw

Answer 1

Unicode字符有点有趣，因为它们以不同的方式显示不同。有时，它们也可以显示为全彩色符号，而不是单色调，这意味着它不再受CSS color规则的影响。

以此为例： http://jsfiddle.net/f4joLkmg/

在chrome和safari中，符号显示为带有蓝色雨滴的紫色伞，但在Firefox中，它是单音图形，因此它采用应用于它的red样式。

我没有IOS 8.3设备（正如评论中提到的那样是问题所在）所以我无法测试如何在那里显示复选标记符号，但我会假设操作系统版本只是选择显示具有特定颜色集的符号，这意味着它不再受文本颜色控制。

那你怎么绕过它呢？好吧，你在问题标题中提到了Font Awesome，但实际上并没有在这里使用它。如果您已经加载了Font Awesome，那么您也可以使用它：

&:before {
    font-family: FontAwesome;
    color: $GIP-OxfamGreen;
    content: '\f00c';
}

如果你没有已经在项目中使用了Font Awesome ..那么你仍然可能想要考虑使用它，或类似的东西而不是unicode符号。实际的图标字体总是会在一致性方面给出更好的结果，而且大多数情况下符号看起来也更好一些。

有没有人在使用IOS 8.3使用内容为字体分配颜色时遇到问题？

1 个答案: