2

したがって、私のWebサイトでは、ボタンに対してcssの役割があり、すべてがChromで表示されるはずですが、IEとFirefoxでは高さが大きいため、画像が多く表示されます。これがhttp://www.dillonbrannick.com/で起こっているウェブサイトです。私はボタンの1つに焦点を合わせていますが、4つすべてで起こっています。

これがホームボタンに影響を与えるコードです。

ボディとナビゲーションタグの内側

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

ボディクラスはおそらく問題に影響を与えないことは知っていますが、ボタンに影響を与えるすべてのものを表示したかっただけです。

これらの2つの画像（左：Chrome、右：IEとFirefox）でわかるように。灰色のバーのすぐ下に青が表示されていますが、これは画像の残りの半分の一部であり、ロールオーバーで上にシフトされます。あなたが私のウェブサイトで見ることができるように。 クロム IEとFirefox よろしくお願いします、ディロン・ブラニック。

4

1 に答える 1

2

あなたの問題は.5の使用だと思います

.nav a{
    height: 107.5px;
}

ブラウザはおそらくそれを別の方法で処理します。半ピクセルのようなものは存在しないと思います。

編集：107px、次に108pxを試してください。私はそれらの1つがあなたに望ましい結果を与えるべきだと思います。おそらく107px。Firefoxは108pxとして107.5pxを取ります。

于 2012-06-05T20:06:42.683 に答える