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

Question

我有一个锚元素，当光标悬停在它上面时，我想在它周围绘制一个边框。问题是锚文本及其右侧的所有内容 "jumps" 在绘制边框时略微向右。

我想我会很聪明并使用背景颜色的边框设置锚点样式（通过 "inherit"），以便在没有悬停时绘制默认边框。然后，当用户悬停时，红色边框简单地绘制在背景边框上，文本不应跳到右侧。但是这个方法不行。

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

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

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

Answer 1

你也需要告诉 border 的初始位置。所以最初，给透明边框，给 space.

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 2

而不是使用 inherit ，尝试

transparent

那么你的 css class 会像下面的那个

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

这将确保边框 space 已经被占用，并且当您悬停它时它不会受到伤害

Answer 3

The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?

它不起作用，因为 1px solid inherit 是一个无效值：

According to MDN，您不能将 inherit 值用作 shorthand 声明的部分（就像您的情况一样）。这是相关的，in-depth 引用：

Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.

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

Example Here

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

Secondarily, I would like to know how to prevent the text from jumping.

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

Example Here

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

或者，除了使用边框，您还可以使用 outline 属性向元素添加不影响元素 box model 的轮廓：

Updated Example

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

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

CSS inherited border color seems to be ignored

css

hover