0

CSSを使ってとてもシンプルなメニューを作りました。Firefox、オペラ、サファリ、クロームではすべて問題ありません。しかし、IE 10では、左側に大きな空き領域があります。パディングとテキスト整列を試しましたが、機能しませんでした。

これは私のメニューです：

<div id="menu_mod">
   <ul>
    <li><a href="#">UŻYTKOWNICY</a>
     <ul>
      <li>  <?php echo anchor('admin/UserGet/GetAll', 'Przeglądaj', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Dodaj', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Uprawnienia', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Aktywacja', 'class="link-class"') ?></li>
      <li>  <?php echo anchor('admin/UserGet/', 'Usuń', 'class="link-class"') ?></li>
     </ul>
    </li>
   </ul>
</div>

およびcss：

#menu_mod {
    width: 200px;
    height:790px;
    float: left;
    background: url(images/menu.png) repeat-x left top;
    text-align: left;
}

#menu_mod ul {
    padding-left: 5px;
}

#menu_mod li {
    padding-left: 5px;
}

#menu_mod ul li a {
    font: bold 12px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#menu_mod ul li a:hover {
    color: #ffffff; 
}

[1]： http: //i50.tinypic.com/2vj9095.png- その他のブラウザ

[1]： http: //i50.tinypic.com/abjtq1.jpg --- IE

削除display:block;しましたが、それでも役に立ちませんでした。anchorとで試しましa hrefたが、それでも同じです。

4

1 に答える 1

1

リストベースのメニューのルール:

  1. リストをリセットします。ul, li { margin:0;padding:0 }
  2. リストのスタイルを設定しないでください - リストのコンテンツをスタイルします。

これは、 以外のfloat/positioning/displayすべてのスタイリングをA-tag に入れる (および を使用するdisplay:block) ことを意味します。

于 2012-11-02T19:19:01.313 に答える