0

我用 CSS 创建了非常简单的菜单。在 Firefox、opera、safari 和 chrome 中一切正常。但在 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;了，但仍然没有帮助。我试过anchorand 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 回答