为什么我的 svg 在 100% 时有一个垂直滚动条？
有人可以解释为什么我在 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 的一部分，所以...
同时我还提交了 错误报告。
Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with the following markup:
<!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>
If I replace the svg with a div it works perfectly. But if I put the svg inside that div, the layout is broken again:
<div class="fullscreen">
<svg></svg>
</div>
Changing the doctype to XHTML seems to fix the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But inline SVG is a part of HTML5 so...
In the meantime I also filed a bug report.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我来晚了一点，但是当我试图解决另一个问题时偶然发现了这个。
我不认为您遇到的问题是错误。默认情况下，SVG 标签是内联元素（根据记录，IMG 标签也是），DIV 被视为块元素。我在这里有点困惑，因为您不应该能够设置内联对象的高度/宽度（如果您尝试在 SPAN 上执行此操作，则高度/宽度将被忽略）。
您可能会认为这是另一种解决方法，但显式将显示属性设置为 block 会删除滚动条。浮动 SVG 元素也可以解决这个问题。
看来 HTML5 DOCTYPE 是基于 W3C 严格的 DOCTYPES（不是过渡性的）。两个严格声明也显示滚动条。
因此，此时，如果您关心严格与过渡 DOCTYPES，最好参考不同的讨论：严格/过渡 DOCTYPE 之间的浏览器渲染差异
希望这能为讨论增加一点价值。
I'm a little late here, but I stumbled across this when I was trying to solve a different problem.
I don't think what you're experiencing is a bug. The SVG tag is an inline element by default (for the record, IMG tags are too) and DIVs are considered block elements. I'm thrown off a little here because you aren't supposed to be able to set height/width to inline objects (If you tried to do this on a SPAN, the height/width is ignored).
You might consider this another workaround, but explicitly setting the display property to block removes the scrollbar. Floating the SVG element would also fix this.
It appears that the HTML5 DOCTYPE is based off of the W3C's strict DOCTYPES (not the transitional). Both strict declarations also display the scroll bar.
So at this point, it might be best to refer to a different discussion if you care about strict vs transitional DOCTYPES: Browser Rendering Difference Between strict/transitional DOCTYPEs
Hopefully this adds a little value to value to the discussion.
为了构建 Corey 的答案，
inline或inline-block元素被称为“内联”，因为它们旨在放置在文本行之间。因此，无论它们出现在何处，都会为“下降”保留空间，即文本行下方的区域，其中 dangly 小写 g's、j's 和 y's 的部分。这就是当您的
svg元素具有display: inline时额外空间的来源。您可以使用line-height属性来控制保留的空间量，也可以通过设置display: block将其完全删除，正如 Corey 所说。我相信您可以设置
img和svg元素的高度和宽度，因为用 CSS 术语来说，它们是“替换”元素，并且行为与常规内联元素。 CSS 规范更详细地解释了其工作原理。就规格而言，它实际上非常可读。To build on Corey's answer,
inlineorinline-blockelements are called "inline" because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the "descent", which is the area underneath a line of text where the dangly parts of lowercase g's, j's, and y's go.So that's where the extra space comes from when your
svgelement hasdisplay: inline. You can manipulate the amount of space reserved with theline-heightproperty, or you can remove it altogether by settingdisplay: block, as Corey noted.I believe you're able to set the height and width on
imgandsvgelements because they are, in CSS parlance, "replaced" elements, and behave a little differently than regular inline elements. The CSS spec explains how this works in more detail. And as far as specs go, it's actually pretty readable.最简单的解决方案是将 CSS 规则
overflow:hidden添加到 html 和/或 body 标记。编辑
另一种解决方案涉及使用 XHTML 文档类型。这在 Chrome 中有效，我怀疑它在 IE9 中也有效。
The easiest solution would be to just add the CSS rule
overflow:hiddento the html and/or the body tag.Edit
Another solution would involve using the XHTML doctype. This works in Chrome, and I suspect it works in IE9.
可能尝试重置 svg 标签上的边距和填充，就像您对 html 和 body 所做的那样。可能是 svg 上的一些默认样式。
Possibly try resetting the margin and padding on the svg tag, like you've done with html and body. Could be some default styles on the svg.
对我来说听起来像是一个 CSS 问题，您已经检查过这些答案了吗？
Sounds like a CSS question to me, have you checked these answers already?