IE 11 css-vars-ponyfill 只支持 :root 变量，不支持行内变量

Question

内联变量在 IE 11 中不工作，甚至 :root 变量在 'css-vars-ponyfill' 的帮助下工作，但内联变量在 IE 11 中仍然不工作

:root {
    --bg-color: black;
  }
  
  .main{display:inline-block;
  background:var(--bg-color);width:200px;height:200px;}

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
<div style="--bg-color:red" class="main">

</div>

Answer 1

CSS自定义属性(var function) does not support IE browser.

您可以尝试添加 css-vars-ponyfill polyfill 以便在 IE 浏览器中使用它，代码示例如下：

<script src="https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-beautify@1/js/lib/beautify-css.min.js"></script> 
<script>
    cssVars({ 
        // Treat all browsers as legacy
        onlyLegacy: false, 
    });

</script>
<style >
    :root {
        --bg-color: green;
    }
    .main {
        display: inline-block;
        background: var(--bg-color);
        width: 200px;
        height: 200px;
    }
</style>
<div style="--bg-color:red" class="main">
    aa
</div>

结果如下：

可能你发现了，在使用这个 Polyfill 的时候，Polyfill 不会扫描内联 CSS 变量，这似乎与 polyfill 有关，你可以查看 this issue .

通用元素可以使用根声明，特殊元素可以直接使用内联样式和background-color:red样式。

Answer 2

IE11不支持自定义变量。

并且填充它并不容易，尤其是内联样式，因为无法使用 javascript 读取样式属性的原始应用值 - 相信我，我已经尝试了所有方法。

有一个 ie11 的 polyfill，几乎完全支持自定义变量。
https://github.com/nuxodin/ie11CustomProperties/

但是你必须像这样添加内联样式：

<div style="--bg-color:red" ie-style="--bg-color:red">

IE 11 css-vars-ponyfill 只支持 :root 变量，不支持行内变量

IE 11 css-vars-ponyfill only support :root variable, but not support inline varible

css

internet-explorer-11

css-variables