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

Question

这是我的十字按钮在IE / Edge中的外观：

这应该是它的样子：

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

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

Answer 1

在我的测试中，IE将边框添加到UTF-8 dingbats子集中的许多unicode字符。这可能是用于呈现字符的字体的缺点（可能是Arial Unicode MS？）。

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

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

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

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

<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/