導航欄懸停效果高於水平線

我正在設計一個新網站，當我這樣做時，我總是在導航欄上花費大量時間。下面的代碼有此預期的效果：導航欄懸停效果高於水平線

HTML：

<div class="navbar"> 
    <a href="index.html">Home</a> 
    <a href="about.html">About</a> 
</div> 
<hr></hr>

CSS：

hr { 
    width: 80%; 
    border: 0; 
    height: 1px; 
    margin-top: 0px; 
    background-color: #000; 
} 

.navbar { 
    text-align: center; 
} 

.navbar a { 
    display: inline-block; 
    position: relative; 
    text-align: center; 
    color: #000; 
    text-decoration: none; 
    font-size: 20px; 
    overflow: hidden; 
    top: 5px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    padding-left: 30px; 
    padding-right: 30px; 
} 

.navbar a:after { 
    content: ""; 
    position: absolute; 
    background-color: #c00; 
    height: 2px; 
    width: 0%; 
    transform: translateX(-50%); 
    left: 50%; 
    bottom: 0; 
    transition: .35s ease; 
} 

.navbar a:hover:after { 
    width: 100%; 
}

這工作在Chrome，Opera和Internet Explorer中的甚至有些版本中，但其他瀏覽器無法達成一致：

火狐（和一些版本的IE）：

Safari中：

這裏是一個代碼段：

hr { 
 
    width: 80%; 
 
    border: 0; 
 
    height: 1px; 
 
    margin-top: 0px; 
 
    background-color: #000; 
 
} 
 

 
.navbar { 
 
    text-align: center; 
 
} 
 

 
.navbar a { 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    top: 5px; 
 
    padding-bottom: 10px; 
 
    padding-top: 10px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.navbar a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    background-color: #c00; 
 
    height: 2px; 
 
    width: 0%; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    bottom: 0; 
 
    transition: .35s ease; 
 
} 
 

 
.navbar a:hover:after { 
 
    width: 100%; 
 
}

<div class="navbar"> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
</div> 
 
<hr>

有什麼方法可以在沒有瀏覽器嗅探的情況下達到預期的效果？

來源

2016-07-27 Mashpoe

你已經在你的網頁已經重置CSS下？ https://necolas.github.io/normalize.css/ –

不，我沒有。我剛剛添加它，它解決了Firefox的問題，但不是Safari瀏覽器......當我設計自己的網站時知道這些會很有幫助，謝謝！ – Mashpoe

我不得不看一下提供的GIF一分鐘，甚至看到不同......你確定這是一個真正重要的區別嗎？這就是說，我會假設用行高而不是padding-top/-bottom來設置導航欄的高度將解決問題。 – TheThirdMan

的問題可以通過執行以下步驟來解決：

添加重置CSS（可以正常化或邁耶重置CSS）
設置一個特定的高度導航欄和元素如Safari沒有身高表現不好
申請框尺寸：邊框;易於造型在填充，邊框，邊距之間的一個元素內沒有太多的計算。旁邊，我通常使用導航欄，而不是另一個小時標籤的邊境線菜單

來源

2016-07-27 03:46:18

導航欄懸停效果高於水平線

回答

相關問題