inline-block元素上的border-box属性不起作用？

Question

我有一系列inline-block元素，我想在鼠标悬停在元素上时添加边框。然而，注意到即使我使用box-sizing: border-box并明确定义元素的宽度和高度，边框仍会偏移元素。我在下面说明了这种行为：

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
}

li:hover { border: 5px dashed grey }

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

我发现的最好的解决方案是使用outline和outline-offset代替border，但我真的很想知道为什么我的原始方法不起作用 :/

更新：虽然BoltClock提供了一个非常好的解释和建议（这正是我所要求的），但我想提一下我完全忘记了flexbox，它几乎解决了我在行内元素上遇到的所有问题。我将其与BoltClock的透明边框技巧结合起来，得到了最终的JSFiddle解决方案。

- woojoo666

---

你打错字了。你的CSS写成了 box-sizing: border box - 你在 "border box" 中使用了空格而不是破折号。 - BoltClock

好的，我修正了拼写错误，谢谢。不过问题仍然存在 :/ - woojoo666

Answer 1

我现在看到了问题所在。发生的情况是box-sizing: border-box会导致每个元素的内容框在添加边框后水平和垂直缩小。由于您的元素是inline-blocks，因此垂直缩小会影响被悬停元素的基线，从而影响它所在行的基线，导致同一行上的其他元素偏移。如果您仔细观察，您会注意到文本实际上保持对齐，这是偏移元素的目的。

将边框更改为轮廓线有效，因为轮廓线旨在不影响布局（并且还因为您完全排除了边框）。

但是，正是出于这个原因，使用轮廓线以这种方式产生了与带边框的原始效果显着不同的效果。将初始透明边框设置为轮廓线，可以确保您的内容保持正确的偏移量，无论边框是否可见背景（之前的答案中显示过，但可能因为投票而被删除）。

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
  border: 5px dashed transparent;
}

li:hover { border-color: grey }

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

- BoltClock