logo标签列表

内联SVG边框错误

htmlcsssvg
3
我遇到了一个奇怪的问题已经几天了。我在我的网站上使用大三角形。我知道如果我用png或其他格式制作三角形，很可能会出现锯齿状。这就是为什么我采用svg方法的原因。
我首先尝试的是在svg元素下添加一个大边框。这可以通过简单地将vertical-align: top;添加到svg元素来解决。
问题在于它在某些浏览器中非常有缺陷。有些浏览器在调整大小时会显示一条线。有时该行始终存在。
下面的图像说明了问题，这是在safari 10.1调整大小时拍摄的： enter image description here 应该是这样的： enter image description here svg是绝对定位的。
是否有人曾经遇到过这个问题，并可以帮助我解决？
为什么你可以使用 ::before 和 ::after 元素，它更好而且更容易。 - lalit bhakuni
当然我可以使用before或after，但我不明白为什么这样更好。我认为这并没有解决任何问题。 - Robert Fridzema
试一试。否则很难说出具体的东西。 - llobet
如果你想得到帮助，你需要创建一个 [mcve]，这样我们才能看到你想要做什么。 - Robert Longson
在 Safari 调整大小时尝试一下。在 iPhone 上，该问题会在任何浏览器的竖屏模式下出现。新的 fiddle：https://jsfiddle.net/t8f8rexv/6/ - Robert Fridzema
1个回答
1
感谢你们的帮助，非常感激！
最终我采用了一种（不太优雅的）解决方案。
对于底部对齐的元素，我添加了一个transform: translate(0, 0.4px);属性；
而对于顶部对齐的元素，则添加了一个transform: translate(0, -0.4px);属性。
目前看来，这是一个不错的解决方案，不会破坏布局！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接