Question

我正在HTML表格单元内尝试SVG。所有HTML元素都将box-sizing设置为border-box，因此边框大小包含在元素大小中。

不幸的是，似乎像文本这样的单元格内容与SVG的行为有所不同，在SVG中，边框高度未（或仅部分包含）边框大小（取决于您使用的浏览器）。

我用下面的代码here

设置了一个小提琴

带有SVG的表格

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

* {
  box-sizing: border-box;
}

tr {
  height: 22px;
}

<table>
  <tr class="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="second">
    <td>4</td>
    <td style="border-top: 1px solid red; border-bottom: 1px solid blue">5</td>
    <td style="padding: 0; border-top: 1px solid red; border-bottom: 1px solid blue">
      <svg style="display: block" width="22" height="22" viewBox="0 0 22 22">
        <circle cx="11" cy="11" r="10" stroke="green" stroke-width="1" fill="yellow" />
      </svg>
    </td>
  </tr>
  <tr class="third">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<table>
  <tr class="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class="second">
    <td>4</td>
    <td style="border-top: 1px solid red; border-bottom: 1px solid blue">5</td>
    <td style="padding: 0; border-top: 1px solid red; border-bottom: 1px solid blue">
      6
    </td>
  </tr>
  <tr class="third">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

您会看到，在Chrome中，带有SVG的第二行比没有SVG的第二行要高（23px）。在Firefox中，即使SVG单元的顶部或底部只有一个边框，SVG单元的大小也不会减少。 IE和Edge似乎可以做到这一点，尽管我发现了更复杂的表示例，但以某种方式无法正常工作。

我的问题是，如果在Chrome浏览器中，它应该是如何工作的（找不到规范），或者是错误的。

带有框大小和边框的SVG在HTML表中的行为

带有SVG的表格

0 个答案: