像▶这样的三角形实体不能在Safari中正确显示

Question

我的意思是在我的网站中使用三角形实体▶和◀作为指示箭头。在模拟模式下，在Chrome上显示正常。

桌面

​

​

但它不能在移动端正常显示。

移动

​

​

这是某种默认设置吗？我怎么修改呢？

Answer 1

如果您使用的是HTML代码或Unicode十六进制箭头，不同的浏览器对这类代码的解释不同，而且它们具有不同的默认设置，因此，使其工作的最佳方法可能是使用图像。

Answer 2

当需要时，我总是使用CSS创建实色三角形：

​

div.triangle {
  position: relative;
}
div.triangle::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 10px;
  border-color: transparent red transparent transparent;
  border-style: solid;
  left: 0;
  top: 0;
  position: absolute;
}

<div>
  <div class="triangle"></div>
</div>

​

只需使用更多的CSS放置三角形div根据您的要求。