在镀铬物的svg背景附近的奇怪的滚动条

Question

我在添加svg文件作为背景时遇到问题.一切似乎都很好,但在谷歌浏览器中,我在svg的右侧和底部得到非活动的滚动条,而不是容器.以下是问题结果的屏幕截图:http://xmages.net/show.php/2812560_strangescrollbars-jpg.html

这是css的一部分

#container>footer {
    width: 1000px;
    margin: -124px auto 0;
    padding-top: 221px;
    background: transparent url("../img/footerBackground.png") no-repeat 42px 0;
}
.backgroundsize.svg  #container>footer {
    background: transparent url("../img/vector/footerBackground.svg") no-repeat 42px 0;
    background-size:  553px 166px;
}

我不知道他们来自哪里.有帮助吗？

Answer 1

使用任何文本编辑器查看原始svg文件.如果您在半像素上放置了任何锚点,请将它们移动到最近的像素.导出SVG时,请确保文档的大小为圆形像素(例如:100px),而不是半像素(例如100,49px).

问题是,如果你有一个文件边缘附近半像素锚点的文档,webkit会将它四舍五入到最近的像素,因此认为你在文档外有锚点,这将创建固定的滚动条.