Question

我正在尝试整合box-sizing，但似乎无效。任何人都帮我理解这个问题..

＆＃13;

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

＆＃13;

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

＆＃13;

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;没有指定宽度或高度尺寸的元素的值将被忽略。

似乎`border-box`没有使用'a`标签

2 个答案: