1

メニューにカーソルを合わせると、IE で大きな遅延が発生するサイトを作成しています。Cufon を組み合わせて使用​​していますが、li:hover 要素に高さ、幅、マージン、またはパディングを適用すると、大きな遅延が発生しているようです。

ですから、それ以外の方法でこれを行うスマートな方法を見つける必要があります。サイトはこちらhttp://w3box.com/mat

私が推測するメニューをはっきりと見ることができます。だから、私が望むのは、メニュー全体を下に押して、高さの線の下から 3 または 4 ピクセル上になるようにすることです。そのため、左側のロゴ フォントとほぼ同じ垂直位置に一致します。

次に、ホバー効果の高さを大きくしたいです。説明するのは難しいですが、メニュー項目の上にカーソルを置いたときに、テキストがボックスの一番下に配置されているボックスを想像してください。このような;

http://img710.imageshack.us/img710/2791/menuheader.jpg

ここで、矢印のように見えるものが下部に突き刺さっていることに気付くかもしれません。私はそれを本当に必要としませんが、それを行う方法について何かアイデアがあれば、助けていただければ幸いです! ;)

4

4 に答える 4

1

私は試していませんが、これはオプションかもしれないと思います。

1 つの div にすべてが含まれているのに、div を div に入れてみませんか?

これはヘッダーの現在のコードです。

<div id="header">  
                <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 

                <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     


                    <ul class="menuwrapper"> 
                        <li><h4><a href="#">Logg ut</a></h4></li> 
                        <li><h4><a href="#">Kontakt</a></h4></li> 
                        <li><h4><a href="#">Kontrollpanel</a></h4></li> 
                    <li><h4><a href="#">Oppskrifter</a></h4></li> 
                    <li><h4><a href="#">Hjem</a></h4></li> 
                    </ul> 



            </div>

このようなことを試すことができるので、さまざまなオブジェクトをより細かく制御できます。

<div id="header" style="float:left;vertical-align:bottom">  
<div id="imgChef">
    <img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/> 
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
    <img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>                     
 </div
 <div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper"> 
<li><h4><a href="#">Logg ut</a></h4></li>                                                              <li><h4><a href="#">Kontakt</a></h4></li> 
<li><h4><a href="#">Kontrollpanel</a></h4></li> 
<li><h4><a href="#">Oppskrifter</a></h4></li> 
<li><h4><a href="#">Hjem</a></h4></li> 
</ul> 
 </div>


</div>

それが正しい組み合わせかどうかはわかりませんが、div 内の 3 つの div を使用すると、header div 内の要素をより細かく制御できるようになると思います。

于 2010-02-09T10:00:34.430 に答える
0

メニューの h4 は必要ないと思うので省略します。設定display:blockし<a>て使用するよりもline-height、padding-left , padding-rightアンカーを適切なサイズに拡張します。また、li:hover は微調整しないと IE6/7 ではサポートされないことにも注意してください。メニューをロゴと同じレベルに配置するには、margin-topon ul 要素を設定するだけです。

于 2010-02-09T09:38:48.450 に答える
0

私にはルールが多すぎて、役に立たないルールが多すぎます。すべてを修正して FF/IE でテストする時間はありませんが、次の例ではうまくいきます。リストスタイル: なし; パディング: 30px 23px 3px 23px; 位置: 相対;
上: 7px; }

于 2010-02-09T09:45:06.950 に答える
0

vertical-alignはどうですか？

于 2010-02-09T09:47:36.897 に答える