为什么我的svg上有100%的垂直滚动条?

时间:2011-01-21 12:10:36

标签: html5 google-chrome svg fullscreen internet-explorer-9

有人可以解释为什么我在Chrome和IE9中看到一个带有以下标记的垂直滚动条:

<!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

5 个答案:

答案 0 :(得分:24)

我在这里有点晚了,但当我试图解决另一个问题时,我偶然发现了这一点。

我不认为你遇到的是一个错误。默认情况下,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">

所以在这一点上,如果您关心严格与过渡性DOCTYPES,最好引用不同的讨论:Browser Rendering Difference Between strict/transitional DOCTYPEs

希望这为讨论增加了一些价值。

答案 1 :(得分:14)

为了建立在Corey的答案上,inlineinline-block元素被称为“内联”,因为它们的目的是在文本行之间进行布局。因此,无论它们出现在何处,都为“下降”保留空间,“下降”是文本行下面的区域,其中小写的g,j和y的dangly部分去了。

svg元素具有display: inline时,这就是额外空间的来源。你可以操纵line-height属性保留的空间量,或者你可以通过设置display: block来完全删除它,正如Corey所说。

我相信您可以在imgsvg元素上设置高度和宽度,因为它们在CSS用语中是“替换”元素,并且与常规内联元素的行为略有不同。 The CSS spec更详细地解释了它的工作原理。就规格而言,它实际上非常易读。

答案 2 :(得分:5)

最简单的解决方案是将CSS规则overflow:hidden添加到html和/或body标记中。

html, body { overflow:hidden; }

修改

另一种解决方案是使用XHTML doctype。这适用于Chrome,我怀疑它适用于IE9。

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

答案 3 :(得分:0)

可能会尝试重置svg标记上的边距和填充,就像你使用html和body一样。可能是svg上的一些默认样式。

答案 4 :(得分:0)

对我来说听起来像一个CSS问题,你已经检查了these answers吗?