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

Question

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

桌面：

但它在移动端无法正常显示。

移动：

这是某种默认设置吗？我该如何修改？

Answer 1

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

Answer 2

I always use CSS to create solid color triangles when needed:

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>

Just use more CSS to place the triangle div as per your requirements.