Jan*_*Jan 14 html5 svg google-chrome fullscreen internet-explorer-9
有人可以解释为什么我在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的一部分,所以......
与此同时,我还提交了一份错误报告.
小智 25
我在这里有点晚了,但当我试图解决另一个问题时,我偶然发现了这一点.
我不认为你遇到的是一个错误.默认情况下,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,最好引用不同的讨论:浏览器渲染严格/过渡DOCTYPE之间的区别
希望这为讨论增加了一点价值.
ada*_*que 15
建立在Corey的答案之上,inline或者inline-block元素被称为"内联",因为它们旨在被排列在文本行之间.因此,无论它们出现在哪里,空间都被保留用于"下降",这是一个文本行下面的区域,其中小写的g,j和y的dangly部分去.
所以这就是你的svg元素有额外空间的地方display: inline.你可以操纵line-height属性保留的空间量,或者你可以通过设置完全删除它display: block,正如Corey指出的那样.
我相信你能够在元素img和svg元素上设置高度和宽度,因为它们在CSS用语中是"替换"元素,并且与常规内联元素的行为略有不同.CSS规范更详细地解释了它的工作原理.就规格而言,它实际上非常易读.
最简单的解决方案是将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">
| 归档时间： |
|
| 查看次数： |
7175 次 |
| 最近记录： |