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

Question

我正在设计一个新网站，当我这样做时，我总是花很多时间在导航栏上。以下代码具有此预期效果：

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，但其他浏览器无法就任何内容达成一致：

Firefox（以及一些IE版本）：

Safari浏览器：

这是一段代码：

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果没有浏览器嗅探，有没有办法达到预期的效果？

Answer 1

可以通过以下步骤解决问题：

• 添加重置CSS（可以规范化或Meyer重置CSS）
• 将特定高度设置为导航栏和 元素，因为Safari在没有高度的情况下表现不佳
• 应用 box-sizing：border-box; 以方便使用 在填充，边框，边距之间没有太多计算的样式 在一个元素内。 此外，我通常使用导航栏的边框代替菜单
下的另一个 hr 标记