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

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>