爲什麼我的svg上有一個垂直滾動條100％？

有人可以解釋爲什麼我看到在Chrome和IE9一個垂直滾動條與下面的標記：爲什麼我的svg上有一個垂直滾動條100％？

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Fullscreen SVG</title> 

    <style> 
     html,body { 
     margin: 0px; padding: 0px; 
     width: 100%; height: 100%;  
     } 

     .fullscreen { 
     width: 100%; height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <svg class="fullscreen"></svg> 
    </body> 
</html>

如果我和它完美的作品一個div取代SVG。但是，如果我把SVG該div裏面，佈局再次被打破：

<div class="fullscreen"> 
    <svg></svg> 
</div>

更改DOCTYPE爲XHTML似乎來解決這個問題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但聯SVG是HTML5的一部分，所以...

在此期間，我還提交了bug report。

來源

2011-01-21 Jan

我在這裏有點晚，但當我試圖解決一個不同的問題時，我偶然發現了這一點。

我不認爲你遇到的是一個錯誤。 SVG標籤默認爲內聯元素（對於記錄，IMG標籤也是如此），並且DIV被視爲塊元素。因爲你不能設置內聯對象的高度/寬度（如果你試圖在SPAN上這樣做，高度/寬度將被忽略），所以我在這裏稍微拋出一點。

您可能會認爲這是另一種解決方法，但將display屬性顯式設置爲block會移除滾動條。浮動SVG元素也可以解決這個問題。

.fullscreen { display: block }

看來HTML5 DOCTYPE是基於W3C嚴格的DOCTYPES（不是過渡性的）。這兩個嚴格的聲明也顯示滾動條。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

所以在這一點上，它可能是最好的，如果你在乎嚴格VS過渡DOCTYPES指不同的討論：Browser Rendering Difference Between strict/transitional DOCTYPEs

希望這增添了些許價值價值的討論。

來源

2011-03-16 20:15:54

可能嘗試重置svg標籤上的邊距和填充，就像您使用html和body一樣。可能是svg上的一些默認樣式。

來源

2011-01-21 12:13:04

nope，已經嘗試過了，發現了一些更奇怪的行爲：div內的svg導致問題。 – Jan 2011-01-21 12:14:45

最簡單的解決方案是將CSS規則overflow:hidden添加到html和/或body標籤。

html, body { overflow:hidden; }

編輯

另一種解決方案將涉及使用XHTML文檔類型。這在Chrome中有效，我懷疑它在IE9中可用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2011-01-21 12:39:05

這不是一個解決方案，這是一個解決方法。我不想要解決方法，我可以自己想出這些。我正在尋找是否有這種行爲的原因，或者它是一個錯誤。我會給你+1，因爲這可能對有同樣問題並尋找實際答案的人有好處。 – Jan 2011-01-21 13:43:26

它是解決方案和解決方法之間的一條細線。如果你在你的例子中輸入了一個合適的doctype，它將顯示不帶滾動條 <！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd「> 或者至少它在Chrome中，我沒有安裝IE9。 – 2011-01-21 13:55:31

聽起來像一個CSS問題給我，你有沒有檢查these answers？

來源

2011-01-21 14:28:05

要在Corey的答案上建立，inline或inline-block元素被稱爲「內聯」，因爲它們旨在排列在文本行之間。所以，無論它們出現在哪裏，空間都是爲「下降」保留的，這是小寫字母g，j和y的部分去文字行下的區域。

所以這就是當你的svg元素有display: inline時額外的空間來自哪裏。正如Corey指出的那樣，您可以操縱line-height屬性保留的空間量，或者通過設置display: block完全刪除它。

我相信你可以在img和svg元素上設置高度和寬度，因爲它們在CSS中用「替換」元素表示，而且行爲與普通內聯元素有所不同。 The CSS spec解釋瞭如何更詳細地工作。就規格而言，它實際上非常易讀。

來源

2012-01-14 19:39:55 adamesque

爲什麼我的svg上有一個垂直滾動條100％？

回答

相關問題