为什么我的 svg 上有一个 100% 的垂直滚动条？答案

【问题标题】：Why is there a vertical scrollbar on my svg at 100%?为什么我的 svg 上有一个 100% 的垂直滚动条？
【发布时间】：2011-06-13 02:51:02
【问题描述】：

谁能解释为什么我在 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>

将文档类型更改为 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。

【问题讨论】：

标签： html google-chrome svg fullscreen internet-explorer-9

【解决方案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

希望这能为讨论增加一点价值。

【讨论】：

我可以将宽度和高度设置为内联元素，这很奇怪。它变得比它被声明为块时更大。感谢您的提示。在 Chrome dev 中检查计算的 svg css。 tools 确实显示它默认是内联的。

【解决方案2】：

以 Corey 的回答为基础，inline 或 inline-block 元素被称为“内联”，因为它们旨在放置在文本行之间。因此，无论它们出现在哪里，都会为“下降”保留空间，即小写 g、j 和 y 的 dangly 部分所在的文本行下方的区域。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

这不是解决方案，而是解决方法。我不想要变通办法，我可以自己想出那些。我正在寻找这种行为是否有原因或者它是一个错误。我会给你 +1，因为这可能对有同样问题并正在寻找实用答案的人有好处。
它在解决方案和变通方法之间划清界限。如果您在示例中输入正确的文档类型，它会显示没有滚动条 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 或者至少它在 Chrome 中是这样，我没有安装 IE9。
<!Doctype html> 是一个合适的文档类型，我想使用 HTML5。

【解决方案4】：

可能尝试重置 svg 标记上的边距和填充，就像您对 html 和 body 所做的那样。可能是 svg 上的一些默认样式。

【讨论】：

不，已经尝试过了，发现了一些更奇怪的行为：div 内的 svg 也会导致问题。

【解决方案5】：

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

【讨论】：