Почему мой A: Hover CSS работает по -разному в Firefox? ⇐ CSS

[Anonymous]

Вот мой сайт: http://library.skybundle.com/
Наведите свою мышь над двумя черными прямоугольниками в главной синей навигационной панели (область заголовка). A: Hover должен изменить цвет на серый. Проблема в том, что в Chrome это выглядит идеально. Но в Firefox в правой правой стороне прокладки не хватает достаточного количества, поэтому всегда есть маленький черный прямоугольник на правой части кнопки «Образовательные курсы» (это будет видно только при падении курсора над кнопкой). Другими словами, серая коробка не проходит весь путь до правой стороны площади кнопки при наведении мыши. Я просто не понимаю, почему это выглядит и отлично работает в Chrome, но в Firefox выходит в Firefox ... < /p>
Поверьте мне, когда я говорю, что попробовал все возможное, чтобы исправить его, используя Firebug в Firefox. Если вы поиграете с ним, используя редактор в вашем браузере, вы увидите, что если вы попытаетесь сделать закладку дольше для Firefox, он всплывает всю кнопку на новую линию. Таким образом, чтобы решить эту проблему, вы должны сделать контейнер шире, но затем исходная проблема возвращается. Это круг проблем, и я уверен, что один из вас гений увидит простое решение, которое мне не хватает. < /P>
Вот мой jsfiddle и код. Обратите внимание, как это выглядит великолепно в Chrome, но не в Firefox?

• Product Training Videos
• Educational Courses

< /code>
css: < /p>
#navigation {
background: url(http://library.skybundle.com/wp-content ... mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}

#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}

#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}

div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}

ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}

ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}

li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}

ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}

ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}


Подробнее здесь: https://stackoverflow.com/questions/198 ... in-firefox