chrome中svg背景周围的奇怪滚动条答案

【问题标题】：Strange scrollbars around the svg background in chromechrome中svg背景周围的奇怪滚动条
【发布时间】：2011-09-07 17:19:33
【问题描述】：

我在添加 svg 文件作为背景时遇到问题。一切似乎都很好，但在 Google Chrome 中，我在 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;
}

我不知道它们是从哪里来的。有什么帮助吗？

【问题讨论】：

我也遇到了同样的问题！与 Firefox 配合良好。见i.imgur.com/cWoHZ.png
是的，就在这里！也许我们应该向 chrome（或 webkit）开发人员发送一张票？我只是不知道如何很好地解释这个问题

标签： css google-chrome background svg

【解决方案1】：

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

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

【讨论】：

我错过了什么吗？ SVG 是一种矢量格式。它使用像素作为维度吗？
这是有道理的，尽管我很好奇它是否可靠地工作。注意：如果您的原生 svg 尺寸非常小，则移动到最近的像素是一个坏主意。将所有内容乘以 100 或 1000 可能更好。无论如何，我宁愿有一个不涉及编辑 svg 本身的解决方案。
这是一个错误。这发生在 Chrome 36 上。提交了一个错误，但错过了 2 次提交的发布分支。在 37 Beta 中它已修复，不幸的是我们只需要等待...code.google.com/p/chromium/issues/detail?id=371250

【解决方案2】：

在 chrome 中，图像对于容器来说似乎有点太大了。

只需添加

溢出：隐藏；

到 CSS 中的容器，这应该停止滚动条，或者使容器稍微变大。

【讨论】：

也许我把问题解释错了：容器比背景大，并且滚动条被添加到背景图像，而不是容器。这对我来说是最奇怪的。

【解决方案3】：

我还注意到，在检查 SVG 时，可能会设置溢出值。但是，如果您删除此值，添加 enable-background，并确保 SVG 向上或向下舍入且不使用小数点，它确实可以解决 Chrome 中的滚动条问题。

尝试替换：

overflow="scroll" xml:space="preserve">

与

enable-background="new 0 0 1200 581" xml:space="preserve">

【讨论】：

在我的情况下，从 SVG 元素（在 SVG 文件中）中删除 overflow="scroll" 就足够了。