Html 变身尺度在狩猎中表现怪异

我用Bootstrap3制作了一个网站。引导3包含平面三角形作为图标。但是图标是平面的，所以我使用拉伸类拉伸它们：

.stretch {
    display: inline-block;
    transform: scale(3,2); /* W3C */
    -webkit-transform: scale(3,2); /* Safari and Chrome */
    -moz-transform: scale(3,2); /* Firefox */
    -ms-transform: scale(3,2); /* IE 9 */
    -o-transform: scale(3,2); /* Opera */
}

它工作得很好，但如果我使用Safari 5，图标看起来很奇怪。（很抱歉，我无法直接上传图像）。 三角形的边是模糊的：

glyphicon的类别为：

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我已经在身体课上试过了：

-webkit-transform: translateZ(0px);

---

我希望你能帮助我，谢谢

模糊缩放是Safari中的一个缺陷：

要解决此问题，可以尝试使用

font size

“缩放”字形图标，然后使用

transform:scale

将其缩小。缩小比例会给您带来更好的结果

---

还有一个，已经是你想要的形状了，不需要变换。使用

font-size

调整大小，而不是

transform:scale

，否则您将再次遇到相同的问题。但它只是一个向右箭头。

你所说的“图标变平”到底是什么意思？@JakeTaylor traingles的宽度太小，这就是我缩放它们的原因。此链接可能会帮助你解决问题