html - Firefox 中边框底部的 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 中测试。