为什么我的 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% 时有一个垂直滚动条? 的相关文章

  • 使用 Javascript 下载文件/url

    我正在尝试通过创建链接并单击它来使用 javascript 自动下载文件 这是可行的 但使用下载属性来指定文件的名称是行不通的 我使用下面的代码 var a document createElement a a download hello
  • 如何防止用户重复提交表单

  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • SharePoint

    我的 SharePoint 网站上有一个 aspx 页面 其中包含了标签 由于某种原因 页面上的每个按钮在单击时都会重新加载页面 即使没有属性 id class 等 或功能的按钮在单击时也会重新加载页面 我该如何解决这个问题 我什至看不到调
  • 使用 Objective-C 将 HTML 文本转换为纯文本

    我有巨大的NSString里面有 HTML 文本 该字符串的长度超过 3 500 000 个字符 我怎样才能将此 HTML 文本转换为NSString里面有纯文本 我正在使用扫描仪 但它运行速度太慢 任何想法 这取决于您的目标 iOS 版本
  • 隐藏嵌入的 pdf 周围的工具栏?

    虽然我认为答案可能在这另一个问题 https stackoverflow com questions 770949 how to disable the default toolbar of pdf page关于pdf规范的回答 是否可以不
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 使 href(锚标记)请求 POST 而不是 GET? [复制]

    这个问题在这里已经有答案了 a href employee action Employee1 a 当我单击 Employee1 链接时 GET 请求将发送到服务器 我想让它 POST 而不是 GET 请求 有没有办法改变 href 的默认
  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • org.openqa.selenium.NoSuchSessionException:会话 ID 为空。调用 quit() 后使用 WebDriver?

    我已经进行了一些搜索 但仍然遇到同样的问题 我相信这可能是由于我的网络驱动程序是静态的造成的 我不太确定 在我的主课中 我包括了 BeforeTest and AfterTest BeforeTest包括根据我的 XML 文件启动新浏览器
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐