如何使链接的背景颜色占据容器div的精确高度？

Question

这里是jsfiddle：

http://jsfiddle.net/cnf6cjm2/

这是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;
}

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

我提出的最好的事情，请参阅上面的jsfiddle，尝试在链接上设置正确的填充，这样当您更改背景颜色时，它将占用所需的高度。它可以在Chrome上运行，但它在FF的顶部和底部都有一个像素，它在IE底部偏离了一个像素。这是屏幕截图：

我也尝试将填充设置为相当多，然后隐藏溢出，但这不起作用。

Answer 1

查看此解决方案

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

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;