0

基本的な水平メニュー (ドロップダウンなし) を作成しようとしています。メニュー用の画像が作成されましたが、メニューの右側にスペースが残っています。div を使用してナビゲーションを作成しました。スタックに関する同様の質問のほとんどは、私のものとは異なり、UL および LI で作成されたメニューに関するものでした。

メニューは IE では問題なく表示されますが、FF、Chrome、Safari、Opera では表示されません。(サンプルリンク) これがなぜなのか、どうすれば修正できるのか、誰でも説明できますか?

  <div style="width: 915px; height:33px;">
     <div  style="width:40px; height:33px; float:left;"><img runat="server" border="0" src="~/_images/_nav/nav_left.jpg" /></div>
    <div style="width:835px; height:33px; float: left; ">
    <div class="mynav" style="width:136px; height:33px; background-image:url(../_images/_nav/nav_student_left2.jpg)" ></div>
    <div class="mynav" style="width:155px; height:33px; background-image:url(../_images/_nav/nav_home2.jpg)"></div>
    <a runat="server" href="~/studentbranch/checking_savings/"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_stash_my_cash2.jpg);" ></div></a>
    <a runat="server" href="~/studentbranch/loans/"><div class="mynav" style="width:133px; height:33px; background-image:url(../_images/_nav/nav_extra_credit2.jpg)"></div></a>
    <a runat="server" href="http://www.chachingteenclub.com/default.aspx?cu_id=92" target="_blank"><div class="mynav" style="width:134px; height:33px; background-image:url(../_images/_nav/nav_cha_ching2.jpg)"></div></a>
    <a runat="server" href="~/apps_tools/" target="_blank"><div class="mynav" style="width:135px; height:33px; background-image:url(../_images/_nav/nav_tools2.jpg)"></div></a>
    <div class="mynav" style="width:7px; height:33px; background-image:url(../_images/_nav/nav_student_right2.jpg);"></div>
    </div>
    <div style="width:40px; height: 33px; float:left;">
        <img runat="server" border="0" src="~/_images/_nav/nav_right.jpg" />
    </div>
    </div>

そして、CSS

.mynav{
float:left;
background-repeat:no-repeat;
padding:0;
display:block;
border:0 none;
outline:0 none;
 }

注：私も試してみdisplay:inlineましたが、結果はありませんでした。

4

1 に答える 1

0

編集：以前の回答を削除しました。これが問題である可能性が高いです（IEを持っていないので、どのように見えるべきかわかりません。理想的なケースの画像を置くのは良い考えです） .

包含<div>の幅は 835 です。その子の幅は 136、155、134、133、134、135、7 です。合計は 834 です (835 より 1 ピクセル少ない)。右側の縦線は背景色です。

編集（再び）：IEのフローティング動作が他のブラウザとは異なる（または少なくともそう思われる）ことを覚えています。あなたが試すことができるのは、幅で遊ぶのではなく<div>、適切なものを含むメニューを提供することです。background-color<div>

于 2013-07-29T14:53:18.477 に答える