Javascript 材料UI 3.9.3未在IE中设置复选框样式

我正在尝试使用创建自定义同意复选框

原因：定制coz，要求使用特定背景（复选框区域为白色）和前景（复选图标为橙色）颜色

实现到目前为止：我已经使用定制CSS实现了它

index.js

： 下面是一个示例，其中包含重现问题所需的最少代码

问题：解决方案在Chrome中似乎可以完美运行。但在IE中，一旦用户选中复选框，它就会消失

---

预期行为：选中复选框后，IE上的选中状态应保持可见。

该问题最初由在twitter上回答

只是在这里贴上一个详细的解释，这样可能会帮助别人。正如Alexey在推文中提到的那样：

这是IE中将

svg

内联到后台

css

属性的问题

只需遵循此答案，您就可以解决问题

至少它在Edge中有效：）

修复

我转到并粘贴了url编码的svg字符串：

输入：

"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='23' height='23' x='.5' y='.5' fill='%23FFF' fill-rule='nonzero' stroke='%23999' rx='4'/%3E%3Ctext fill='%23F2410A' font-size='20' font-weight='bold'%3E%3Ctspan x='1' y='18'%3E✓%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A\")"

输出：

"url(\"data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><rect width='23' height='23' x='.5' y='.5' fill='#FFF' fill-rule='nonzero' stroke='#999' rx='4'/><text fill='#F2410A' font-size='20' font-weight='bold'><tspan x='1' y='18'>✓</tspan></text></g></svg>
\")"

我们可以通过

btoa

传递它以生成Base64编码字符串：

const base64UrlString=btoa（✔；）；
log（'这里是生成的Base64编码字符串：'，base64UrlString）好的，那么无论是谁标记结束这个问题，你有没有机会看看我附带的StackBlitz示例？它基本上有最低限度的实施。：）我还包括了一个问题，即它正在消失在IE的点击。请您也发表评论，或者让我知道需要什么其他信息？尚未实施，但EDGE本身是Microsoft推荐的。由于对IE的支持已经结束，大多数更新的东西在itI上都不起作用，我尝试在IE浏览器中打开Stackblitz示例，但它没有加载。它显示空白页。然后我用Edge browser对其进行了测试，发现了类似的问题。我检查了代码，发现上面应用了“MuiPrivateSwitchBase-input-10”CSS类。它的不透明度设置为0。如果取消选中此属性，则它将显示带有黑色选中标志的复选框。因此，您可以尝试检查这些CSS文件，这可能有助于缩小问题的范围。我建议您只使用MaterialUI发布代码示例。所以我们也可以试着用IE来测试它。实际上我已经做过了。你需要在这里，在你的问题，而不是任何第三方网站张贴一个帖子。
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='23' height='23' x='.5' y='.5' fill='%23FFF' fill-rule='nonzero' stroke='%23999' rx='4'/%3E%3Ctext fill='%23F2410A' font-size='20' font-weight='bold'%3E%3Ctspan x='1' y='18'%3E✓%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A\")"

"url(\"data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><rect width='23' height='23' x='.5' y='.5' fill='#FFF' fill-rule='nonzero' stroke='#999' rx='4'/><text fill='#F2410A' font-size='20' font-weight='bold'><tspan x='1' y='18'>✓</tspan></text></g></svg>
\")"

<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none' fill-rule='evenodd'><rect width='23' height='23' x='.5' y='.5' fill='#FFF' fill-rule='nonzero' stroke='#999' rx='4'/><text fill='#F2410A' font-size='20' font-weight='bold'><tspan x='1' y='18'>&#10004;</tspan></text></g></svg>