IE creates unnecessary offset on menu subitems - html

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><i class="fa fa-user fa-fw"></i> Perfil do Usuário</li>
<li><i class="fa fa-gear fa-fw"></i> Configurações</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logoff</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><i class="fa fa-book"></i> Manual</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">×</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/