css проблема с границей в Firefox

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.