Question

我有一个自定义的css变量，它在选择器的单独的css文件中声明。

.ui-grid-row:nth-child(odd) {
background-color: var(--altbg-color) !important;
}

这不是根元素。因此，不确定在这种情况下css-vars-ponyfill将如何工作。我也尝试过，但是无法使它起作用。（如果有人可以帮助我使它正常运行，我将不胜感激。）

我正在尝试使用

通过javascript（我正在使用AngularJS 1.3）将值设置为变量。

document.documentElement.style.setProperty('--some-color', 'green')

在Chrome和Firefox上可以正常使用，但在IE（11）中则不能。

有人有解决方案吗？

谢谢。

Answer 1

它是not supported in IE 11。

您只能使用IE Edge 16及更高版本中的CSS变量。但是，IE 15部分支持它。

在Edge 15中，不计算具有css变量的嵌套计算，并且将其忽略see bug
在Edge 15中具有css变量的动画可能会导致网页崩溃see bug
在Edge 15中无法在伪元素see bug中使用css变量

尽管如此，这里有一个polyfill：

https://www.npmjs.com/package/css-vars-ponyfill

这不支持IE edge11。它开始支持IE edge 12+。而且没有优势，它开始支持IE 9。

IE  Edge    Chrome  Firefox Safari
----------------------------------
9+  12+     19+     6+      6+

Answer 2

有一个polyfill，它几乎可以完全支持IE11中的CSS变量，包括JS集成：
https://github.com/nuxodin/ie11CustomProperties
（我是作者）

该脚本利用了IE具有最少的自定义属性支持这一事实，可以在考虑到级联的情况下定义和读取属性。
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
然后在javascript中阅读它：
getComputedStyle( querySelector('.myEl') )['-ie-test']

演示：

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/ed6a269145661bfc6a43a5b69f06248fa760e766/demo.html

document.documentElement.style.setProperty（'-some-color'，'green'）在IE中不起作用

2 个答案:

演示：