似乎`border-box`不适用于`a`标签的内联块

Question

我正在尝试集成box-sizing，但似乎无法正常工作。任何人都可以帮助我理解这里的问题..

Live Demo

a{
  display:inline-block;
  background:#fff;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}

<a class="active" href="#">EN</a><a href="#">FR</a>

Answer 1

代码中有两个主要问题：首先，正如@Daniel 在他的回答中指出的那样，必须明确元素的尺寸以防止自动调整大小。此外，如 this answer 中所述，inline-block 元素与 border-box 大小冲突，但有几种解决方法。

一方面，CSS 属性overflow: hidden 也可以添加到相关元素中。或者，可以使用vertical-align: top 来确保所有元素具有相同的基线。下面可以看到一个功能示例，用更大的边框进行强调：

a{
  display:inline-block;
  background:#fff;
  border:10px solid #ccc;
  box-sizing:border-box;
  width:5em;
  height:5em;
  overflow:hidden;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}

<a class="active" href="#">EN</a><a href="#">FR</a>

Answer 2

您需要明确设置希望浏览器对其使用border-box 计算的维度值。

根据spec 参考border-box 值：

内容的宽度和高度是通过减去边框来计算的 和 指定的中各边的填充宽度 .由于内容的宽度和高度不能 负数，此计算的下限为零。

所以为a 元素设置宽度和/或高度属性，然后从中减去填充/边框。

box-sizing: border-box; 没有指定宽度或高度尺寸的元素的值将被忽略。