边框框在 <a> 块的顶部和底部添加 1px 空间

Question

我需要一些帮助来确定 td 内 <a> 顶部和底部的 1px 空间来自何处，以及如何删除它。

<a> 显示为 flexbox，这是必需的，并填充整个 td。
这似乎是由border-sizing: border-box 引起的，但我不明白为什么（如果你删除它工作正常的属性，但我有点需要它，如果存在干净的替代方案，我宁愿找到另一个解决方案）。

table {
	border-collapse: collapse;
}

td {
	padding: 0;
}

td {
	width: 5rem;
	height: 5rem;
	padding: 0;
	border: 1px solid red;
}

a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border: 1px solid blue;
	outline: 0;
}

* {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

<table>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
</table>

Answer 1

将box-sizing: border-box 应用于* 选择器，并将box-sizing: content-box 应用于td > a 元素。此外，width: 100% 可以从a 元素中删除。

* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

td {
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: 1px solid red;
}

td > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  border: 1px solid blue;
  outline: 0;
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box;
}

<table>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
</table>