Firefox IE, отображающий код CSS по-разному для Chrome

Question

Так что на моем сайте у меня есть функция css для кнопок, и все отображается так, как должно быть в Chrom, но в IE и Firefox высота больше, поэтому вы можете видеть слишком много изображения. Вот что происходит на сайте: http://www.dillonbrannick.com/ Я просто фокусируюсь на одной из кнопок, но это происходит со всеми четырьмя из них.

Вот код, который влияет на кнопку дома.

Внутри тела и навигационные теги

<nav class="body"> 

<div class="links nav" id="home-nav"> 
<a href="#" 
onclick=" toggle_visibility_1('illustrations'); toggle_visibility_1('illustration-sub'); toggle_visibility_1('painting-sub'); toggle_visibility_1('paintings'); toggle_visibility_1('animation'); toggle_visibility_1('contact'); toggle_visibility_1('box'); toggle_visibility_2('homeimage'); toggle_visibility_2('homebio'); toggle_visibility_2('facebook'); toggle_visibility_2('google');"> 
</a> 
</div> 

</nav> 

Я бы себе Javascript не влияет как все это делает Diplay включения/выключения элементов, так что не имеет ничего общего с размерами.

вот CSS:

.body{ 
    position:absolute; 
    left:50%; 
    top:50%; 
} 
nav{ 
    margin: -125px 0 0 -44.5px; 
} 
.nav{ 
    position:absolute; 
    width: 89px; 
} 
.nav a{ 
    height: 107.5px; 
} 
.links a{ 
    display: block; 
    margin: auto auto auto auto; 
    cursor: pointer; 
    outline: transparent solid 0px; 
} 
#home-nav { 
    margin: -60px 0px 0px -140px; 
} 
#home-nav a{   
    background: url('http://dl.dropbox.com/u/70582811/home.link.png') no-repeat left top; 
} 
#home-nav a:hover{ 
    background-position: left -107.5px; 
} 

Я знаю, что тело класс, вероятно, не имеет никакого значения для этой проблемы, но я просто хотел показать, что все эффекты кнопки.

Как вы можете видеть на этих двух изображениях (слева: Chrome, справа: IE и Firefox). Появляется синий цвет, расположенный под серой полосой, которой не должно быть, это часть другой половины изображения, которая затем сдвигается вперед. Как вы можете видеть на моем website. Заранее спасибо, Dillon Brannick.

Answer 1

Я думаю, ваша проблема заключается в использовании .5

.nav a{ 
    height: 107.5px; 
} 

браузеры, вероятно, справиться с этим по-разному. Я не думаю, что существует нечто вроде половины пикселя.

Редактировать: просто попробуйте 107px, а затем 108px. Я думаю, что один из них должен дать желаемый результат. Вероятно, 107px. Firefox занимает 107.5px как 108px.