在Firefox中使用border-bottom的css问题

Question

看看这个jsFiddle

在除Firefox之外的所有浏览器中，此菜单看起来很好。 但是如果你看看firefox，你会发现所选月份的边框底部需要低一个像素。这里有什么问题？我该如何解决呢。

Answer 1

这应该可以解决问题。实例：http://jsfiddle.net/tw16/ZFXwk/45/

ul li {
  float: left; /* changed from display:inline */
}
#months li {
  line-height: 40px;
  border-bottom: 1px solid #4e6531;
}
#months li:hover {
  border-bottom: 1px solid #90bd57;
}
#months li a{ /* new rule */
    display: block;
    padding: 0 17px; /* padding applied here instead of on the li */
}
#months li a:hover{
  color: #90bd57;
}
#months li.this_month { /* made selector more specific */
  color: #90bd57;
  font-weight: bold;
  border-bottom: 1px solid #90bd57;
  padding: 0 20px;
}

在当前版本的Chrome，Firefox，IE，Safari和Opera中测试过。