有人可以解释一下为什么我在 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 的一部分，所以......
与此同时，我还提交了一份错误报告 http://code.google.com/p/chromium/issues/detail?id=70487.
我来晚了一点，但是当我试图解决另一个问题时偶然发现了这个。
我不认为您遇到的问题是错误。默认情况下，SVG 标签是内联元素（根据记录，IMG 标签也是），DIV 被视为块元素。我在这里有点困惑，因为您不应该能够设置内联对象的高度/宽度（如果您尝试在 SPAN 上执行此操作，则高度/宽度将被忽略）。
您可能会认为这是另一种解决方法，但显式将显示属性设置为 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，最好参考不同的讨论：严格/过渡 DOCTYPE 之间的浏览器渲染差异 https://stackoverflow.com/questions/3735979/browser-rendering-difference-between-strict-transitional-doctypes
希望这能为讨论增加一点价值。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
