内联svg边框错误

Question

我现在正在努力解决一个奇怪的问题。我在我的网站上使用大三角形。我知道如果我用png或任何其他格式制作三角形，那么它很可能看起来很脆。这就是为什么我选择svg方法。

我接近的第一件事是svg元素下的大边框。只需将vertical-align: top;添加到svg元素即可解决此问题。

问题在于它在某些浏览器中非常错误。调整大小时，某些浏览器会在其下方显示一条线。有时候这条线总是在那里。

下图说明了问题，这是在调整大小时的safari 10.1：

这应该是这样的

svg绝对定位于我

之前有没有人遇到过这个问题，可以帮我解决这个问题吗？

Answer 1

感谢您的帮助，非常感谢！

我最终得到了一个（脏）修复程序。

与底部对齐的元素给出了transform: translate(0, 0.4px);

与顶部对齐的元素给出了transform: translate(0, -0.4px);

现在这似乎是一个很好的解决方案而不会破坏布局！