css - chrome 中 svg 背景周围的奇怪滚动条

Question

我在添加 svg 文件作为背景时遇到问题。一切似乎都很好，但在谷歌浏览器中，我在 svg 的右侧和底部看到了 strage 不活动的滚动条，而不是容器。这是问题结果的屏幕截图: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 文件。如果您在半像素上放置了任何 anchor ，请将它们移动到最近的像素。导出 SVG 时，请确保文档的大小为圆形像素(例如:100 像素)，而不是半像素(例如 100,49 像素)。

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