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会将它四舍五入到最近的像素，因此认为你在文档外有锚点，这将创建固定滚动条。

Answer 2

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

添加

溢出：隐藏;

到CSS中的容器，这应该停止滚动条，或者使容器略大一些。

Answer 3

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

尝试更换：

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

与

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

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

3 个答案: