谁能解释为什么我在 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>
如果我将 svg 替换为 div，它会完美运行。但是如果我把 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 .
最佳答案
我来晚了一点，但是当我试图解决一个不同的问题时偶然发现了这个。
我认为您遇到的不是错误。 SVG 标签默认是内联元素(郑重声明，IMG 标签也是)，DIV 被视为 block 元素。我在这里有点迷茫，因为您不应该将高度/宽度设置为内联对象(如果您尝试在 SPAN 上执行此操作，则高度/宽度将被忽略)。
您可能会认为这是另一种解决方法，但将显示属性显式设置为 block 会删除滚动条。 float 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
希望这能为讨论增加一点值(value)。
关于html - 为什么我的 svg 上有一个 100% 的垂直滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4758638/