为什么我的 svg 在 100% 时有一个垂直滚动条?

2024-02-09

有人可以解释一下为什么我在 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(使用前将#替换为@)

为什么我的 svg 在 100% 时有一个垂直滚动条? 的相关文章

随机推荐