Question

有人可以解释为什么我在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。

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

最简单的解决方案是将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">

Answer 4

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

Answer 5

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

为什么我的svg上有100％的垂直滚动条？

5 个答案: