16

有人可以解释为什么我在 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 的一部分，所以...

与此同时，我还提交了一份错误报告。

4

5 回答 5

27

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

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

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

于 2011-03-16T20:15:54.553 回答
15

以 Corey 的回答为基础，inline或者inline-block元素被称为“内联”，因为它们旨在布置在文本行中。因此，无论它们出现在哪里，都会为“下降”保留空间，这是一行文本下方的区域，小写字母 g、j 和 y 的悬挂部分所在的位置。

所以当你的svg元素有display: inline. 正如 Corey 所指出的，您可以操纵该line-height属性保留的空间量，或者您可以通过设置将其完全删除。display: block

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

于 2012-01-14T19:39:55.850 回答
5

最简单的解决方案是将 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-21T12:39:05.873 回答
0

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

于 2011-01-21T12:13:04.737 回答
0

对我来说听起来像是一个 CSS 问题，你已经检查过这些答案了吗？

于 2011-01-21T14:28:05.427 回答