LI 标签内的块级元素导致 LI 标签比它的子内容高。这可以避免吗？

Question

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

这是可以避免的吗？如果不是，为什么？
Link 例如：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

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

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

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

Answer 2

终于找到了一个开放的工单。我一直在寻找，但一定是错过了。来自：https://bugs.jqueryui.com/ticket/15214#no2

添加以下内容：

.ui-menu li.ui-menu-item{
    display:inherit;
}

添加到样式表应该会使其正常运行。显然这只发生在 webkit 浏览器和其他浏览器上。

LI 标签内的块级元素导致 LI 标签比它的子内容高。这可以避免吗？

block level elements inside an LI tag cause the LI tag to be taller than it's child contents. Can this be avoided?

html

css

jquery

jquery-ui

jquery-ui-menu