似乎`border-box`在`a`标签的`inline-block`中不起作用。

Question

似乎`border-box`在`a`标签的`inline-block`中不起作用。

3

我尝试集成box-sizing，但似乎不起作用。有人能帮我理解这里的问题吗？演示链接

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>

- user2024080

1

但似乎没有起作用，为什么呢？你想要的输出是什么？ - Taki

@Taki - 边框不应该超出橙色填充区域，因为我使用了border-box属性。 - user2024080

稍等，我有一个解决方案。我现在会写一个答案。 - StardustGogeta

3个回答

1

你需要明确设置要使用 border-box 计算的维度的值。

根据参考 spec 中关于 border-box 值的规定：

内容宽度和高度通过从各自侧面的边框和填充宽度中减去指定的宽度和高度来计算。由于内容宽度和高度不能为负，因此该计算会被截断为零。

因此，为您的 a 元素设置宽度和/或高度属性，然后将从这些属性中减去填充/边框。

对于没有指定宽度或高度维度的元素，box-sizing: border-box; 值将被忽略。

- Danny

请参考@StardustGogeta的答案，其中使用了overflow属性值作为解决方案。 - Danny

1

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

a.active{
  border: 1px solid transparent;
  background: orange;
}

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

我遇到了同样的问题，认为我找到了一个更简单的解决方案。不要完全删除边框，只需将其颜色更改为透明即可。这样它仍然存在，尽管它不可见。由此，锚标记内的文本不会来回跳动。

- mike889

当这个问题被发布时，我与CSS毫无关系，也不会想到在4年后我会知道它是如何工作的。尽管如此，这仍然可能对某些人有所帮助。 - mike889

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- StardustGogeta · Accepted Answer

代码中存在两个主要问题：首先，正如@Daniel在他的回答中指出的那样，必须明确元素的尺寸，以防止自动调整大小。此外，如此答案中所述，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>