Question

当我在菜单项上放置一个图标时，它会变得很高，但是如果你检查元素，则li是元素中唯一高的东西。

这可以避免吗？如果没有，为什么？链接到示例：https://jsbin.com/kirekufoju/edit?html,output

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
       <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   </head>
   <body>

      <div>
         <ul id="e3ce4756-8352-40ab-b273-e87e253df37d" role="menu" tabindex="0" class="" aria-activedescendant="ui-id-18" >
            <li action="Change Theme" id="menuItem_1467148140" d>
               <nav id="ui-id-17" tabindex="-1" role="menuitem" class=""><span class="ui-icon ui-icon-disk "></span>Change Theme</nav>
            </li>
            <li action="Configure Dashboard" id="menuItem_772280342" >
               <nav id="ui-id-18" tabindex="-1" role="menuitem" class=""><span class=""></span>Configure Dashboard</nav>
            </li>
            <li action="Change Password" id="menuItem_145997753" >
               <nav id="ui-id-19" tabindex="-1" role="menuitem" class=""><span  class="ui-icon ui-icon-disk "></span>Change Password</nav>
            </li>
            <li  action="Help" id="menuItem_351754787" data-uri="">
               <nav id="ui-id-20" tabindex="-1" role="menuitem" class=""><span class=" "></span>Help</nav>
            </li>
            <li action="Logout" id="menuItem_1997186055" >
               <nav id="ui-id-21" tabindex="-1" role="menuitem" class=""><span class=" "></span>Logout</nav>
            </li>
         </ul>
      </div>
   </body>
  <script>
  $(document).ready(function(){

    $(document).ready(function(){
      $('ul').menu({

      })

    });
  });
  </script>
</html>

Answer 1

从list-style-image中移除li应该可以解决问题：

.ui-menu .ui-menu-item {
  list-style-image: none;
}

https://jsbin.com/mimeqebute/1/edit?html,output

Answer 2

Finaly为此找到了一张门票。我一直在寻找，但一定是错过了。来自：https://bugs.jqueryui.com/ticket/15214#no2

添加以下内容：

value | starting
------+-------
 1    |  null
 3    |  2
 4    |  2
 8    |  6

到样式表应该使它正常运行。显然，这只发生在webkit浏览器上，可能还发生在其他浏览器上。

LI标记内的块级元素导致LI标记高于其子内容。这可以避免吗？

2 个答案: