html - Firefox 和 IE 以不同于 Chrome 的方式显示 css 代码

Question

因此，在我的网站上，我对按钮使用了 css Angular 色，所有内容都在 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 不会影响它，因为它所做的只是显示开/关元素，所以它与尺寸无关。

这是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;
}

我知道 body 类可能对问题没有任何影响，但我只是想展示影响按钮的所有内容。

如您在这两张图片中所见(左:Chrome，右:IE 和 Firefox)。灰色条下方出现了不应该出现的蓝色，这是图像另一半的一部分，然后在翻转时向上移动。正如你在我的 website 上看到的那样. 提前致谢，狄龙·布兰尼克。

Answer 1

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

.nav a{
    height: 107.5px;
}

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

编辑:只需尝试 107 像素，然后是 108 像素。我认为其中之一应该会给你想要的结果。大概 107px。 Firefox 将 107.5px 取为 108px。