CSS繼承邊框顏色似乎被忽略

Question

我有一個錨點元素，當光標懸停在它上面時，我想畫一個邊框。問題在於，當繪製邊框時，錨文本及其右側的所有內容「略微向右跳」。

我以爲我會很聰明，並使用背景顏色的邊框（通過「繼承」）設置錨點的樣式，以便在沒有懸停時繪製默認邊框。然後，當用戶懸停時，紅色邊框將簡單地繪製在背景邊框上，文本不應該跳到右側。但是這種方法不起作用。

的主要原因我張貼是瞭解爲什麼我用繼承的顏色繪製邊框的策略是行不通的。換句話說，爲什麼不繪製繼承顏色的邊框？其次，我想知道如何防止文本跳躍。

這裏是風格和的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屬性。

這意味着你將需要使用手寫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

而不是使用繼承，嘗試

透明

然後你的CSS類看起來像下面這樣

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

這將確保邊框空間已經採取和當你徘徊它不會傷害