有人可以解释为什么我在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的一部分,所以......
与此同时,我还提交了bug report。
答案 0 :(得分:24)
我在这里有点晚了,但当我试图解决另一个问题时,我偶然发现了这一点。
我不认为你遇到的是一个错误。默认情况下,SVG标记是内联元素(对于记录,IMG标记也是如此),DIV被视为块元素。我在这里被抛弃了一点,因为你不应该为内联对象设置高度/宽度(如果你试图在SPAN上执行此操作,则忽略高度/宽度)。
您可能会考虑另一种解决方法,但明确将display属性设置为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,最好引用不同的讨论:Browser Rendering Difference Between strict/transitional DOCTYPEs
希望这为讨论增加了一些价值。
答案 1 :(得分:14)
为了建立在Corey的答案上,inline
或inline-block
元素被称为“内联”,因为它们的目的是在文本行之间进行布局。因此,无论它们出现在何处,都为“下降”保留空间,“下降”是文本行下面的区域,其中小写的g,j和y的dangly部分去了。
当svg
元素具有display: inline
时,这就是额外空间的来源。你可以操纵line-height
属性保留的空间量,或者你可以通过设置display: block
来完全删除它,正如Corey所说。
我相信您可以在img
和svg
元素上设置高度和宽度,因为它们在CSS用语中是“替换”元素,并且与常规内联元素的行为略有不同。 The CSS spec更详细地解释了它的工作原理。就规格而言,它实际上非常易读。
答案 2 :(得分:5)
最简单的解决方案是将CSS规则overflow:hidden
添加到html和/或body标记中。
html, body { overflow:hidden; }
修改强>
另一种解决方案是使用XHTML doctype。这适用于Chrome,我怀疑它适用于IE9。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
答案 3 :(得分:0)
可能会尝试重置svg标记上的边距和填充,就像你使用html和body一样。可能是svg上的一些默认样式。
答案 4 :(得分:0)
对我来说听起来像一个CSS问题,你已经检查了these answers吗?