2

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

这是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）。在不应该存在的灰色条下方出现蓝色，这是图像另一半的一部分，然后在翻转时向上移动。正如你在我的网站上看到的那样。 铬合金 IE 和火狐 在此先感谢狄龙布兰尼克。

4

1 回答 1

2

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

.nav a{
    height: 107.5px;
}

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

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

于 2012-06-05T20:06:42.683 回答