iOS和Safari中的CSS`currentColor`关键字的问题

问题描述

1. 以下是（谢谢@NicoO）：在Safari中，初始的红色颜色应用于 currentColor 的所有其他实例。


2. 如何使用CSS修复 currentColor ？
的继承问题

3. CSS颜色关键字。使用它相当丰富，我可以补充。例如：

   Full Story

   I am using the CSS colour keyword currentColor in a project. Using it rather profusely, I might add. For example:

   每个幻灯片都有一个变化的背景颜色和一个对比的颜色 。
   当幻灯片变化时，它更新网站标题，以通知它新的对比度。
   网站标题的颜色会相应交换，任何带有继承
   或 currentColor 关键字更新，例如< svg> 的填充， border-color s和一些 background-color s。

   Each slide has a varying background-color and a contrasting color assigned to it. When the slide changes, it updates the Site Header to inform it of the new contrast. The Site Header's color is swapped accordingly and anything with the inherit or currentColor keyword gets updated, such as an <svg>'s fill, some border-colors, and some background-colors.

   另一个更简单的例子：

   所有这一切都很流畅。

   支持Firefox，Chrome，Opera，Internet Explorer 9+及其移动等效项。不幸的是，Apple Webkit（iOS Safari和OSX Safari）遭受了不良和不稳定的支持。它不会在任何地方，也不是所有的时间，即使在最简单的例子，也不是很好地重新绘制或需要时一致。

   Support is superb under Firefox, Chrome, Opera, Internet Explorer 9+, and their "mobile" equivalents. Unfortunately, Apple Webkit (iOS Safari and OSX Safari) is suffering from poor and erratic support. It doesn't work everywhere, nor all the time—even in the simplest of examples—nor does it repaint very well or consistently when needed.

   我做了一些搜索并没有发现很多人使用这个实用的CSS关键字和ergo没有现有的手段来进行特征检测或polyfill。我不知道我将如何进行Modernizr测试这个功能。特别是检测部分支持，就像我需要的Apple Webkit。

   I've done some searching and haven't found many people using this practical CSS keyword and ergo no existing means to feature-detect it or polyfill it. I don't know how I would go about making a Modernizr test for this feature. Especially to detect partial-support like I'd need for Apple Webkit.

   我可能只是去浏览器检测它，直到我能想到一个

   I'm probably just going to browser-detect it at the moment until I can think of a solution or stumble upon someone with the smarts that can think of a solution faster than me.

   我有一个聪明的人， '修改了小提琴（上面链接），以粗略地复制我所拥有的问题。我注意到，它是像 currentColor 被锁定与最初继承的值（红色），并将其应用于其他一切。例如，如果您将：nth-​​child（1）的 color 切换为应用新值的其他值所有以下元素使用 currentColor 。

   I've modified the fiddle (linked above) to grossly replicate the issues I'm having. What I've noticed is it's like currentColor gets locked with the initially inherited value ("red") and carries it along when applied to everything else. For example, if you switch :nth-child(1)'s color to something else that new value gets applied to all following elements using currentColor.

   
   
   • OSX，Safari 6-7
   
   
   • iOS 6-7，Safari
   
   
   
   
   • Windows，Safari 5
   
   
   • iOS 5，Safari
   
   

   Safari 6中的东西被盗了。因为这是一个被低估的功能，没有人注意到。

   Something in Safari 6 and up got borked. Since this is such an underrated feature, nobody noticed.

   推荐答案

   这是我最近面临的问题之一。 border-color默认情况下继承与字体相同的颜色，所以解决方案是不使用currentColor。尝试分解边框属性。例如

   This is one of the issue I've faced recently. border-color inherit the same color as font by default so The solution is not to use currentColor at all. Try breaking down border properties. for e.g.

   border : 1px solid currentColor 
   

   到

   border-width : 1px;
   border-style : solid;
   

   我为你换了一个小东西
   

   I've made a little fiddle for youhttp://jsfiddle.net/6of25jw8/

   这篇关于iOS和Safari中的CSS`currentColor`关键字的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！