IE 在菜单子项上创建不必要的偏移
Posted
技术标签:
【中文标题】IE 在菜单子项上创建不必要的偏移【英文标题】：IE creates unnecessary offset on menu subitems 【发布时间】：2017-03-06 04:38:31 【问题描述】：我正在使用名为 sb admin 2 的引导模板作为对项目的引用。
由于某种原因，仅在 IE 中（一如既往）它在子菜单上创建偏移量时存在问题。使用检查我可以看到，当我将 line-height 属性标记为关闭然后再次打开时，它变得与其他浏览器相同。
IE：
FF：
菜单是一个名为 metismenu 的插件，我在 sb admin 2 源代码中看到了一段似乎可以解决问题但对我不起作用的 javascript。
我用的是IE11版本，但我猜别人会出现同样的错误。
这是小提琴： 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 src="/Compartilhado/Images/logo.png" />
</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 src="/Compartilhado/Images/usuarioNaoIdentificado.png" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>【问题讨论】：
我确实注意到 IE 在菜单项的左侧显示 ehm、thingies，当您翻转行高时它们会消失。 是的，我不太相信这种启用/禁用方法来检查 CSS 中的错误，但它是我解决错误的最接近的方法，但在页面运行时才有意义。我认为这只是处理 IE 的另一个 CSS 技巧。 【参考方案1】：你可以试试把：
.sidebar ul li
border-bottom: 1px solid #e7e7e7;
line-height:0;
color:transparent;
和
.menu4 ul li a
cursor: pointer;
line-height:1.45em;
预览地址：https://jsfiddle.net/ubqqs70c/4/
【讨论】：
成功了！显然，这个 line-height 技巧可以防止创建偏移量。以上是关于IE 在菜单子项上创建不必要的偏移的主要内容，如果未能解决你的问题，请参考以下文章