奇怪的滾動條周圍的鉻在svg背景

我有一個問題，添加一個SVG文件作爲背景。一切看起來都不錯，但在Google Chrome瀏覽器中，我在svg的右側和底部獲得不活動的滾動條，而不是容器。這是一個問題的結果的截圖：http://xmages.net/show.php/2812560_strangescrollbars-jpg.html 奇怪的滾動條周圍的鉻在svg背景

這裏來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; 
}

的一部分，我不知道哪裏他們來自。任何幫助？

來源

2011-06-03 Bardt

我有完全相同的問題！與Firefox合作良好。見http://i.imgur.com/cWoHZ.png – zopieux 2011-10-24 08:13:40

是的，在這裏！也許我們應該向鉻（或者webkit）開發者發送一張票？我只是不知道如何很好地解釋這個問題 – Bardt 2011-11-04 10:30:46

同上，同一問題 – 2012-02-17 01:04:59

在鉻中，圖像對於容器來說似乎稍大。

只需加上

overflow：hidden;

在CSS中的容器，這應該停止滾動條，要麼或使容器稍大。

來源

2011-06-03 10:23:34

也許我解釋了這個問題：容器大於背景，滾動條被添加到背景圖像，而不是容器。這對我來說是最奇怪的。 – Bardt 2011-06-05 08:07:36

用任何文本編輯器查看原始svg文件。如果您將任何錨點放置在半像素上，請將它們移動到最接近的像素。導出SVG時，請確保文檔的大小爲圓形像素（例如：100px），而不是半像素（例如100,49px）。

問題是，如果您的文檔的半像素錨點靠近文件邊緣，webkit會將其四捨五入到最接近的像素，因此認爲您在文檔外部具有錨點，並且會創建固定的滾動條。

來源

2011-11-06 06:09:39

我想念什麼？ SVG是一種矢量格式。它是否將像素用作尺寸？ – Bardt 2011-11-10 06:12:11

這是有道理的，但我很好奇，如果它可靠地工作。注意：如果您的本地svg大小非常小，移動到最近的像素是一個壞主意。可能更好地將所有東西都乘以100或1000.無論如何，我寧願有一個不涉及編輯svg本身的解決方案。 – 2012-02-17 00:55:37

這是一個錯誤。這發生在Chrome 36上。提交了一個錯誤，但錯過了發佈分支2次提交。在37 Beta版中它已經修復，不幸的是我們只能等待... https://code.google.com/p/chromium/issues/detail?id=371250 – 2014-08-13 16:31:14

我也注意到，在檢查SVG時可能會出現溢出值集。但是，如果您刪除此值，請添加enable-background，並確保SVG向上或向下四捨五入並且不使用小數點，但它確實修復了Chrome中的滾動條問題。

嘗試更換：

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

與

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

來源

2014-08-07 16:39:26 ControlZ

奇怪的滾動條周圍的鉻在svg背景

回答

相關問題