我正在构建一个网站,其中包含许多使用SVG创建的曲线。
除了Chrome之外,它们在所有浏览器中都能很好地工作,在某些浏览器宽度下,它们的高度会略微降低,在下方留下一个小的空白区域。
你可以看到我的意思here。
我指定宽度,最大宽度,高度和最大高度为this question,但没有成功。
关于为什么会这样做以及如何解决的任何想法?
提前致谢,
汤姆
编辑: 这是截图,说明我的意思。紫色曲线沿顶边不应有细白线:
答案 0 :(得分:1)
粗暴黑客。也许这个计算可以用101%来完成?
.homepage_intro_section.purple.dark_purple_below .curve
{
background-position:center calc(100% + 2px);
}
.dark_purple .curve
{
background-position: center -3px;
}
我认为您的bg路线也存在一些小问题(重复)?
.dark_purple .curve {
background: url(../svg/extended-curve-purple-to-white.svg) center bottom no-repeat, none center no-repeat;