如何删除IE边缘周围特殊字符的边框？

Question

在IE/Edge中，我的十字按钮是这样的：

​

​

它应该是这样的：

​

​

CSS检查器显示此#10006；html字符的FFF颜色：

​

​

如何删除黑色边框并将颜色设置为白色？

Answer 1

在我的测试中，IE将边框添加到UTF-8dingbat子集的多个unicode字符中。这可能是用于呈现字符的字体的一个缺点(可能是Arial？)。

如果要可靠地使用#10006实体，则可能需要使用包含该字符的web字体。下面是加载DejaVu Sans并在边缘：https://jsfiddle.net/ekwtwv11/中显示#10006实体的小提琴

@font-face {
  font-family: 'DejaVuSans';
  src: url(dejavusans-webfont.woff);
}
.utf10006 {
  font-family: 'DejaVuSans', 'Arial Unicode MS', sans-serif;
}

然而，还有其他选择可能更可取：

• 使用大多数字体支持的#215;
• 使用SVG形状
• 使用:before和:after伪选择器在按钮上创建"x“：

<div class="btn"></div>

.btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 50%;
}
.btn:before,
.btn:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  display: block;
  background: white;
  width: 28px;
  height: 8px;
}
.btn:before {
  transform: rotate(45deg);
}
.btn:after {
  transform: rotate(-45deg);
}

下面是展示最后一种技术的演示：https://jsfiddle.net/2p9ufxt7/