为什么 100% 等于 150 像素？答案

【问题标题】：Why does 100% equal 150 pixels?为什么 100% 等于 150 像素？
【发布时间】：2016-04-17 07:49:28
【问题描述】：

以下代码生成一个 150 像素高的表格。为什么是150？这是 SVG 的怪癖还是更一般的东西？

<table class="root" cellspacing="0">
  <tr>
    <td>
      <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none" style="height:100%;background-color:lightgreen;">
        <text x="0" y="6.5" font-size="9px">a</text>
      </svg>
    </td>
    <td><span style="font-size:2em;background-color:lightblue">I would expect it to be as tall as this span</span></td>
  </tr>
</table>

【问题讨论】：

标签： html css svg

【解决方案1】：

根据this source

SVG 不是（只是）图像。 SVG 是一个文档。将使用 HTML 替换元素的默认大小：300 像素宽，150 像素高。这适用于<img>、<object> 或<iframe>。默认 300x150 大小也适用于 HTML 文档中的内联 <svg> 元素，但这是 HTML5 规范中相对较新的共识：默认情况下，其他浏览器会将内联 SVG 扩展到视口的完整大小——相当于宽度：100vw；高度：100vh； — 这是直接在自己的浏览器选项卡中打开的 SVG 文件的默认大小。 Internet Explorer 缩小了差异，对图像和内嵌 SVG 使用 100% 的宽度和 150 像素的高度。

【讨论】：

这是非常有价值的信息，并回答了我在主题中提出的问题。关于如何实现我想要的任何想法，即让 SVG 垂直扩展为与表格中最高的单元格相同的高度？
@PavelGrinfeld preservespectRatio 无
那么当内容增长的时候就不会垂直拉伸了。

【解决方案2】：

您尝试适应高度的跨度不是 SVG 的父级。它是兄弟，因此height:100% 不适合它的高度。

【讨论】：