Css 复选框勾号在边缘浏览器中显示为点

我有这样一个复选框：

input[type="checkbox"] {
  position:relative;
  top:0.5em;
  -webkit-appearance: none;
  height: 1.25em;
  width: 1.25em;
  margin-right: 5px;
  vertical-align: top;
}

input {
  margin:0 0 0.2em 0;
  border-radius:0.1em;
  border:1px solid #d2d2d2;
  padding:0.8em;
  box-sizing:border-box;
  font-size:16px;
  color:black;
}

input[type="checkbox"]:checked::before{
  content: "\f00c";
  font-family:"FontAwesome";
  position: absolute;
  font-size: 1em;
  left: 0.15em;
  top:0.3em;
  text-align: center;
  width: 1.25em;
  color: #678b4f;
}

Jsfiddle

它在大多数浏览器中都表现得很好，到目前为止，它至少在忽略

-webkit外观的更笨拙的浏览器中可以使用

但是，在Edge中，复选框的选中版本显示为一个非常小的点（而不是字体的勾号），几乎不可见。如果删除
-webkit外观
，则会显示一些可用的内容，但会在webkit浏览器中破坏它

有人知道我如何解决这个问题吗？
它实际上不是一个点，它是一个非常小的复选框，因为
输入上有填充。如果您将其从
0.8em
更改为
0.1em
，您将明白我的意思

将填充从输入元素移动到
输入[type=“checkbox”]：选中：：在
选择器之前，它将在所有浏览器中工作相同。
问题是Edge实际上支持
-webkit
属性，但
-webkit外观
的行为是意外的（可能是错误）。添加此属性似乎可以在一定程度上设置复选框的样式，但仍会呈现原始复选框。有趣的是，尽管将该值设置为
none
，DOM检查器仍显示它仍保留
复选框
：


微软关于
-webkit外观的声明如下：无
：

默认。元素的外观未更改

请注意，当您希望“未渲染”时，它会显示“未更改”。这些文档似乎是关于IE的，所以我不确定它是否也与Edge相关，或者根本不相关

一种可能的解决方法是黑客攻击，它只针对Webkit浏览器。在实际选择器之前添加选择器
body:not（*:root）
：

body:not(*:root) input[type="checkbox"] {

你可以试试这个

    @supports (-ms-ime-align: auto) {
  input[type="checkbox"] {
      width:51px;height:51px;
  }
  input[type=checkbox]::-ms-check{
                                color:red;
                                border:0;
                                background:rgba(0,0,0,0);
                            }
}

这适用于IE
Edge@支持（-ms-ime-align:auto）

这是为选中复选框时输入[type=checkbox]：-ms check
我这里没有Edge，但您可以尝试强制字体大小（使用
！重要的
）。这有什么不同吗？谢谢回复@MrLister，但我想我确实在
input
cssIt中设置了16px的字体大小，在其他浏览器中显示的已经不同了！你同意吗？如果是的话，那么在属性中稍加更改以及
填充：0
应该会有所帮助-@LukeCaldwell是的，但谁知道Edge在其默认样式表中有哪些内容。我在Edge中尝试了小提琴，但它看起来很好。添加下面的屏幕截图