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

Question

这是我的十字按钮在 IE/Edge 中的样子:

它应该是这样的:

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

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

Answer 1

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

如果您想可靠地使用 #10006 实体，您可能需要使用包含该字符的网络字体。这是一个加载 DejaVu Sans 并将在 Edge 中显示 #10006 实体的 fiddle :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 伪选择器在您的按钮上创建一个“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/