如何使 link 的背景颜色占据容器 div 的确切高度？

Question

这是 jsfiddle：

这是HTML：

<div id="header"><ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#" id="selected-nav">Another Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul></div>

这是CSS：

body {
    margin:10px;
    padding:0;
}

#header {
    height:92px;
    background:#58585a;
    position:relative;
}

#header ul {
    margin:0;
    padding:0;
    list-style-type:none;
    position:absolute;
    top:35px;
    right:16px;
}

#header ul li {
    display:inline;
    font-size:1.25em;
}

#header ul li a {
    color:#ffffff;
    text-decoration:none;
    margin-left:1.5em;
    padding:35px 0;
}

#selected-nav {
    background:#ffa31a;
}

我有一个 header div，其中有一个水平 ul 用于导航。我将 ul 绝对定位，使其位于 header div 的右侧并垂直居中。我想要做的是在导航中突出显示当前页面。我希望突出显示 link 上的背景颜色，我希望 link bg 完全填满整个高度。

我想出的最好的事情，见上面的 jsfiddle，是尝试在 link 上设置正确的填充，这样当你改变背景颜色时它会占据所需的高度。它适用于 Chrome，但在 FF 中它在顶部和底部偏移了一个像素，在 IE 中它在底部偏移了一个像素。这是其中的屏幕截图：

我也试过将填充设置得过大一点，然后隐藏 overflow-y，但这没有用。

Answer 1

body {
  margin: 10px;
  padding: 0;
}
#header {
  height: 92px;
  background: #58585a;
  float: left;
}
#header ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
}
#header ul li {
  float: left;
  font-size: 1.25em;

  
}
#header ul li a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 1.5em;
  line-height:4.6;
}
#selected-nav {
  background: #ffa31a;
}

<div id="header">
  <ul>
    <li><a href="#">Link 1</a>
    </li>
    <li id="selected-nav"><a href="#">Another Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
  </ul>
</div>

Answer 2

查看此解决方案

http://jsfiddle.net/keLsc2op/

CSS

body {
    margin:10px;
    padding:0;
}

#header {
    height:92px;
    background:#58585a;
    position:relative;
}

#header ul {
    margin:0;
    padding:0;
    list-style-type:none;
    position:absolute;
    top:0px;
    height:100%;
    line-height:86px;
    right:16px;
}

#header ul li {
    display:inline;
    font-size:1.25em;
}

#header ul li a {
    color:#ffffff;
    text-decoration:none;
    margin-left:1.5em;
    height:100%;
    display:inline-block;
}

#selected-nav {
    background:#ffa31a;
}

如何使 link 的背景颜色占据容器 div 的确切高度？

How to make background color of link take up exact height of container div?

css

height

padding

background-color

highlight