为什么我的svg有100％垂直滚动条？ [英] Why is there a vertical scrollbar on my svg at 100%?
问题描述
<！DOCTYPE html>有人可以解释为什么我在Chrome和IE9中看到一个垂直滚动条： ;
< html>
< head>
< title>全屏SVG< / title>
< style>
html，body {
margin：0px; padding：0px;
宽度：100％;身高：100％;
}
.fullscreen {
width：100％;身高：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 // ENhttp://www.w3.org/TR/xhtml1/ DTD / XHTML1-transitional.dtd>
但是内联SVG是HTML5的一部分，所以...
与此同时，我还提交了错误报告
a>。我在这里稍微晚了点，但当我试图解决不同的问题时，我偶然发现。
我不认为你遇到的是一个错误。 SVG标签默认为内联元素（对于记录，IMG标签也是如此），并且DIV被视为块元素。我在这里被抛弃了一点，因为你不应该设置高度/宽度到内嵌对象（如果你试图在SPAN上这样做，高度/宽度将被忽略）。
您可能会考虑使用另一个解决方法，但是将display属性显式设置为block会移除滚动条。浮动SVG元素也可以解决这个问题。
.fullscreen {display：block}
看起来，HTML5 DOCTYPE是基于W3C严格的DOCTYPES（不是过渡性的）。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 / / ENhttp://www.w3.org/TR/html4/strict.dtd\">
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
因此，在这一点上，如果您关心严格vs vs过渡性DOCTYPE：浏览器呈现严格/过渡性DOCTYPE之间的区别
希望这会为讨论的价值增加一点价值。
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.
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.
.fullscreen { display: block }
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.
<!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">
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.
这篇关于为什么我的svg有100％垂直滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
