CSS继承的边框颜色似乎被忽略了

Question

我有一个锚元素，我想在光标悬停在它上面时画一个边框。问题是锚文本及其正确的一切＆＃34;跳跃＆＃34;绘制边框时略微向右。

我认为我很聪明，并用背景颜色的边框设置锚点（通过＆＃34;继承＆＃34;），以便在没有悬停时绘制默认边框。然后，当用户悬停时，红色边框只是在背景边框上绘制，文本不应该向右跳。但这种方法不起作用。

我发帖的主要原因是了解为什么我使用继承颜色绘制边框的策略不起作用。换句话说，为什么不绘制继承颜色的边框？其次，我想知道如何防止文本跳跃。

以下是样式和JSFiddle：https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/

a:link, a:visited {
     border: 1px solid inherit;
}
a:hover {
     border: 1px solid red;
}

Answer 1

  

我发布的主要原因是要理解为什么我使用继承颜色绘制边框的策略不起作用。换句话说，为什么不绘制继承颜色的边框？

它无效，因为1px solid inherit是无效值：

According to MDN，您不能将inherit值用作速记声明的部分（就像您的情况一样）。以下是相关的深入报价：

  

只有各个属性值可以继承。由于缺失值被其初始值替换，因此不可能通过省略它们来允许继承单个属性。关键字inherit可以应用于属性，但仅作为整体应用，而不是作为一个值或另一个值的关键字。这意味着使一些特定值继承的唯一方法是使用带有关键字inherit的longhand属性。

这意味着您需要使用longhand border-color属性才能继承border-color值：

Example Here

a:link,
a:visited {
  border: 1px solid;
  border-color: inherit;
}

  

其次，我想知道如何防止文本跳跃。

如果您不想使用继承的边框颜色，只需使用透明边框替换添加的边框：

Example Here

a {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}

或者，您也可以使用outline属性向不会影响元素box model的元素添加轮廓，而不是使用边框：

Updated Example

a:hover {
  outline: 1px solid red;
}

Answer 2

您还需要告诉border的初始位置。所以最初，给出透明边框，给出空间。

body {
  padding: 1em;
}
a:link,
a:visited {
  border: 1px solid transparent;
}
a:hover {
  border: 1px solid red;
}

<p>
  Hello <a href="">This is a link</a> and here is more text, <b>which doesn't move</b>.
</p>

现在它不敢动。 :) inherit不起作用的原因是，none将是继承的值，它会导致边框为0px。 _{（我不确定，但这就是编译的内容。）}

Answer 3

而不是使用inherit，请尝试

  

透明

然后你的css类看起来像下面那个

a:link, a:visited {
 border: 1px solid transparent;
}

这将确保已经占用边框空间，当您悬停它时不会受到伤害