为什么我的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％？

回答

相关问题