导航栏悬停效果高于水平线

我正在设计一个新网站，当我这样做时，我总是在导航栏上花费大量时间。下面的代码有此预期的效果：导航栏悬停效果高于水平线

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

导航栏悬停效果高于水平线

回答

相关问题