为什么我的svg在100%时会出现垂直滚动条？

Question

为什么我的svg在100%时会出现垂直滚动条？

htmlgoogle-chromesvgfullscreeninternet-explorer-9

17

请问为什么使用以下标记，在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 的一部分，所以...

同时我也提交了一个错误报告。

- Jan

5个回答

15

为了扩展Corey的回答，"inline"或"inline-block"元素被称为"内联"，因为它们意图与文本行之间布局。所以，无论它们出现在哪里，都会保留"下降"(descent)的空间，这是一行文本下面的区域，小写字母g、j和y等的悬挂部分放在那里。

这就是当你的svg元素有display: inline时额外的空白来自哪里。您可以通过line-height属性来调整保留的空间量，或者通过设置display:block来完全删除它，正如Corey所指出的那样。

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

- adamesque

5

最简单的解决方法是在html和/或body标签中添加CSS规则overflow:hidden。

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

- Coin_op

2

这不是解决方案，而是权宜之计。我不想要权宜之计，我可以自己想出来。我想知道这种行为的原因是什么，还是一个错误。我会给你+1，因为这可能对于有相同问题并寻找实际答案的人有好处。 - Jan

解决方案和权宜之计之间只有一线之差。如果在示例中放入适当的文档类型声明，它将显示而无需滚动条。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 或者至少在Chrome中是这样的，我没有安装IE9。 - Coin_op

2

"<!Doctype html>" 是一个合适的文档类型声明，我想使用HTML5。 - Jan

0

可以尝试重置 SVG 标签上的边距和填充，就像您在 HTML 和 body 上所做的那样。可能是 SVG 上的一些默认样式。

- Stuart Memo

不行，已经尝试过了，发现一些更奇怪的行为：在 div 中使用 svg 也会出现问题。 - Jan

0

听起来像是CSS问题，你已经查看了这些答案吗？

- Erik Dahlström

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Corey Docken · Accepted Answer

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

我认为你所遇到的不是bug。SVG标签默认是内联元素（IMG标签也是），而DIV被视为块级元素。我有点困惑，因为你不能将高度/宽度设置为内联对象（如果你尝试在SPAN上这样做，高度/宽度会被忽略）。

你可能认为这是另一种解决方法，但显式地将display属性设置为block可以去除滚动条。将SVG元素浮动也可以解决此问题。

.fullscreen { display: block }

看起来HTML5的DOCTYPE基于W3C的严格DOCTYPE（而不是过渡）。这两种严格声明也会显示滚动条。

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

所以在这一点上，如果您关心严格与过渡的 DOCTYPE，请最好参考另一个讨论：Browser Rendering Difference Between strict/transitional DOCTYPEs

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