Firefox和IE显示css代码与Chrome不同

Question

所以在我的网站上我有按钮的css角色，一切都在Chrom中显示，但在IE和Firefox中，高度更大，所以你可以看到太多的图像。 这是http://www.dillonbrannick.com/上发生的网站。我只关注其中一个按钮，但它们正在发生在所有4个按钮上。

这是影响主页按钮的代码。

在body和nav标签内

<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 on / off元素所以它与尺寸无关。

这是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上看到的那样。 提前致谢， 狄龙布兰尼克。

Answer 1

我认为你的问题是使用.5

.nav a{
    height: 107.5px;
}

浏览器可能会以不同的方式处理。我不认为存在半像素的东西。

编辑：只需尝试107px，然后尝试108px。我认为其中一个应该给你想要的结果。 107px可能。 Firefox占用107px，为108px。