9
Używam szablonu ładowania początkowego o nazwie sb admin 2 jako odniesienia do projektu.IE tworzy niepotrzebne przesunięcie w podelementach menu
Z jakiegoś powodu tylko w IE (jak zawsze) ma problem z offsetem tworzonym na podmenu. Korzystając z inspekcji, mogłem zauważyć, że kiedy oznaczyłem właściwość height-line, a następnie ponownie, stała się taka sama, jak innych przeglądarek.
IE: 
FF: 
Menu jest plugin o nazwie metismenu i widziałem w kodzie źródłowym sb Admin 2 kawałek javascript, który wydaje się naprawić problem, ale nie zadziałał dla mnie.
Używam wersji IE11, ale myślę, że będzie to ten sam błąd w innych.
Oto skrzypce: 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">×</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>
I nie zauważyć, że wyświetlacze IE, ehm, thingies, na lewo od pozycji menu, które znikają po przerzucenie wysokość wiersza. –
Tak, nie ufam tak bardzo w tej opcji włączania/wyłączania, aby sprawdzać błędy w CSS, ale było to najbliżej do rozwiązania tego błędu, ale ma sens tylko wtedy, gdy strona jest uruchomiona. Myślę, że to po prostu kolejna sztuczka CSS do obsługi IE. – Marco