IE creates unnecessary offset on menu subitems

Question

I'm using a bootstrap template called sb admin 2 as reference to a project.

For some reason only in IE (as always) it has a problem with an offset being created upon the submenus. Using the inspect I could see that when I marked the line-height property off and then on again, it became the same as the other browsers.

IE:

FF:

The menu it's a plugin called metismenu, and I saw at the sb admin 2 source code a piece of javascript that seems to fix the problem but didn't work for me.

I'm using the IE11 version, but I guess it'll be the same error at others.

Here's the fiddle: https://jsfiddle.net/macmessa/ubqqs70c/

$(document).ready(function() {
  /* BootStrap */
  $(".menu4").addClass("navbar-default sidebar navbar-collapse").attr("role", "navigation");
  $(".menu4").addClass("navbar-collapse collapse in");
  $(".menu4").attr("aria-expanded", "true");
  $(".menu4 ul").addClass("nav");
  $(".menu4 ul ul").addClass("nav-second-level");
  $(".menu4 ul ul ul").addClass("nav-third-level");
  $(".menu4 li.itemPai a:not(.isParent)").append('<span class="fa arrow"></span>');
  // Plugin
  $('.menu4').metisMenu();
});

.menu4 ul li a {
  cursor: pointer;
}
.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}
.sidebar ul {
  width: 100%;
}
.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
  background-color: #eee;
}
.sidebar .arrow {
  float: right;
}
.sidebar .fa.arrow:before {
  content: "\25BA";
}
.sidebar .active>a>.fa.arrow:before {
  content: "\25BC";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
  padding-left: 37px;
}
.sidebar .nav-third-level li a {
  padding-left: 52px;
}
@media(min-width:768px) {
  .menu4 {
    width: 250px !important;
  }
  .sidebar {
    z-index: 1;
    position: absolute;
    margin-top: 51px;
  }
  .navbar-right li {
    margin-left: auto;
  }
}
@media(max-width:768px) {
  .menu4 {
    width: auto;
  }
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 100%;
  }
  .navbar-right li {
    float: left;
  }
}
.navbar-right {
  margin-right: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<div id="pagina" class="container-fluid">
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Navegação</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" target="_blank">
        <img alt="" src="/Compartilhado/Images/logo.png" height="20" />
      </a>
      <a class="navbar-brand" href="/PM1.MVC/">
                    Projeto Modelo
                </a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-envelope-o fa-fw"></i>
          <span class="badge">42</span>
          <i class="fa fa-caret-down"></i>
        </a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-usuario">
          <li><a href="#" data-toggle="modal" data-target="#divModalPerfilUsuario"><i class="fa fa-user fa-fw"></i> Perfil do Usuário</a></li>
          <li><a href="#"><i class="fa fa-gear fa-fw"></i> Configurações</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logoff</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-support fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-ajuda">
          <li><a href="#"><i class="fa fa-book"></i> Manual</a></li>
        </ul>
      </li>
    </ul>

    <div class="menu4" id="mnuPrincipal">
      <ul>
        <li class="itemPai"><a id="mnuExemplo">Exemplo</a>
          <ul>
            <li><a class="isParent" href="/PM1.MVC/Menu" id="mnuExemploMenu">Menu</a></li>
            <li><a class="isParent" href="/PM1.MVC/Controle" id="mnuExemploControle">Controle</a></li>
            <li class="itemPai"><a id="mnuExemploMensagem">Mensagem</a>
              <ul>
                <li><a class="isParent" href="/PM1.MVC/MensagemAlerta" id="mnuExemploMensagemAlerta">Alerta</a></li>
                <li><a class="isParent" href="/PM1.MVC/MensagemNotificacao" id="mnuExemploMensagemNotificacao">Notificacao</a></li>
              </ul>
            </li>
            <li><a class="isParent" href="/PM1.MVC/MapaMetropolitano" id="mnuExemploMapaMetropolitano">Mapa Metropolitano</a></li>
            <li><a class="isParent" href="/PM1.MVC/TratamentoErro" id="mnuExemploTratamentoErro">Tratamento de Erro</a></li>
          </ul>
        </li>
        <li class="itemPai"><a id="mnuCadastro">Cadastro</a>
          <ul>
            <li><a class="isParent" href="/PM1.MVC/Usuario" id="mnuCadastroPesquisaOtimizada">Pesquisa Otimizada</a></li>
            <li><a class="isParent" href="/.PM1.MVC/Item" id="mnuCadastroExemploCRUD">Exemplo CRUD</a></li>
          </ul>
        </li>
        <li class="itemPai"><a id="mnuRelatorio">Relatório</a>
          <ul>
            <li><a class="isParent" id="mnuRelatorioExemplo">Exemplo de Relatório</a></li>
          </ul>
        </li>
        <li class="itemPai"><a id="mnuUtilitario">Utilitário</a>
          <ul>
            <li><a class="isParent" href="/.PM1.MVC/Configuracao" id="mnuUtilitarioConfiguracao">Configuração</a></li>
            <li><a class="isParent" id="mnuUtilitarioNotificacao">Notificação para Usuário</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </nav>

  <div id="conteudo">

  </div>
</div>

<div class="modal fade" id="divModalPerfilUsuario" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Perfil do Usuário</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>
                Nome:
                <br /> USER
              </p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>
                Login:
                <br /> USR1
              </p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>
                Empresa:
                <br /> C
              </p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>
                Área:
                <br />
              </p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <img alt="foto" src="/Compartilhado/Images/usuarioNaoIdentificado.png" width="75" height="90" />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You can try to put:

.sidebar ul li {
   border-bottom: 1px solid #e7e7e7;
   line-height:0;
   color:transparent;}

and

.menu4 ul li a {
  cursor: pointer;
  line-height:1.45em;
}

Preview at: https://jsfiddle.net/ubqqs70c/4/