1

拡張可能なメニューがあります。

IE7 では、上下に白い隙間ができます。IE8では一番上。さまざまな提案を試みましたが、何も役に立たないようです。

ここでサイトを見ることができます: http://dffernandez.com/client_review_files/wap/

問題は「インフラストラクチャ」ボタンにあります(2番目のもの)

前もって感謝します。

HTML

<!--Aside left nav-->
    <div id="secondary-nav">
      <ul>
        <li class="leaf-first"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">airport &amp; location details</a></li>
        <li class="expand-top"></li> <!--Extra li so it can expand background-->
        <li class="leaf-expand"><a href="#">infraestructure</a>
          <!--Submenu-->
          <ul class="asidel-submenu">
            <li class="leaf-first"><a href="#">Current Tenants</a></li>
            <li class="leaf"><a href="#">Industry Especific Info</a></li>
            <li class="leaf"><a href="#">Aerospace</a></li>
            <li class="leaf"><a href="#">Unmanned Aerial Vehicles</a></li>
            <li class="leaf"><a href="#">Repair</a></li>
            <li class="leaf-las"><a href="#">Summary of Master Plan</a></li>
          </ul> <!--Submenu ends-->
        </li> <!--Expand-->
        <li class="expand-bottom"></li> <!--Extra li so it can expand background-->
        <li class="leaf"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">communities</a></li>
        <li class="leaf"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">newsroom</a></li>
        <li class="leaf-last"><a href="#"><img src="img/left-aside/sec-nav-arrow.png" width="21" height="21" class="sec-nav-arrow" alt="">location map</a></li>
      </ul>
    </div> <!--Aside left nav-->

CSS

/*secondary nav*/
#aside-left #secondary-nav li{
list-style: url(none) none;
margin-bottom: 13px;
}

#aside-left #secondary-nav li a {
height: 31px;
display: block;
background: url(../img/left-aside/sec-nav-back.png);
text-transform: uppercase;
text-decoration: none;
padding-top: 12px;
padding-left: 12px;
}

#aside-left #secondary-nav ul .leaf-expand a {
background: url(../img/left-aside/sec-nav-expand-back.png) repeat-y;
height: auto;
padding-top: 6px;
padding-bottom: 6px;
}

#aside-left #secondary-nav ul .leaf-expand img { /*controls the arrow position next to the expand. For changing the image go to js/script.js*/
display: block;
float: left;
margin-right: 6px;
padding-left: 12px;
margin-top: 3px;

}
#aside-left #secondary-nav ul .expand-top {
background: url(../img/left-aside/sec-nav-expand-back-top.png) no-repeat;
height: 7px;
margin-bottom: 0px;

}
#aside-left #secondary-nav ul .expand-bottom {
background: url(../img/left-aside/sec-nav-expand-back-bottom.png) no-repeat;
height: 6px;
margin-top: -13px;

}
#aside-left #secondary-nav .asidel-submenu {
padding-left: 39px;
padding-right: 12px;
padding-bottom: 9px;
background: url(../img/left-aside/sec-nav-expand-back.png) repeat-y;

} 
#aside-left #secondary-nav .asidel-submenu li {
list-style: disc inside;
margin-bottom: 3px;
color: #0073BC;

}
#aside-left #secondary-nav .asidel-submenu li a {
text-transform: none;
display: inline;
padding-left: 0px;

}
#aside-left #secondary-nav .sec-nav-arrow {
margin-right: 6px;
display: block;
float: left;
margin-top: -3px;

}
4

2 に答える 2

1

以前にこの問題に遭遇したことがあります。修正は簡単ですが、やや奇妙です。すべてがここで完全に説明されています - http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

IE7での要点は次のとおりです。

li a {display:inline-block;}
li a {display:block;}

そうです、display: block と言う前に、display: inline-block と言う必要があります。変でしょ?しかし、それはうまくいきます!

また、すべてのブラウザでも実行できます。

編集: 私の悪い、私はあなたの投稿について結論に飛びつきました-これがあなたにとってより良い答えです:

あなたがやっていることは、それを達成しようとする本当にクレイジーな方法です。保存しようとしている「グラフィック」は、単純な境界線によって CSS で複製できます。このフィドルを見てください:

http://jsfiddle.net/CC4gv/

これで、余分な li を完全に取り除くことができます。

于 2012-12-07T18:45:08.750 に答える
0

The important rules of styling list-based menus:

  • リストをリセットする ul, li{padding:0;margin:0}
  • リスト要素 ( ulli) のスタイルをpositionfloatまたはdisplay
  • display:blockすべてのスタイリングを使用して A タグに配置する

これにより、すべてのリスト レイアウトの問題の 99% が解決されます。

また、UI 要素はインライン タグではなく、CSS 背景画像にする必要があります。これにより、レイアウトをより細かく制御できます。

これはすべて私のチュートリアルで説明されています: I Love Lists .

于 2012-12-07T18:42:09.257 に答える