1

Sempre uso o Chorme pra testar minha aplicação em asp.net mvc. Após finalizar, testei no IE e vi que o menu estava abrindo na vertical. Constatei que era problema de atualização do IE, pois no caso estava usando o IE8. Instalei o IE10 e a aplicação passou a funcionar corretamente em todos os navegadores. Pois bem, subi a aplicação pra Intranet no IIS e voltei a ter o mesmo problema em relação ao menu. Rodando local pelo IE10 os menus e submenus abrem certinho, mas na intranet, pelo mesmo IE10, o menu aparece na vertical. Como resolver esse problema de compatibilidade?

Meu menu:

<!DOCTYPE HTML>
<html lang="pt-BR">

<body>
<div class="container">

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
             <a class="navbar-brand" href="#">Competências</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">      

             <li>@Html.ActionLink("Menu1", "Index", "Menu1"")</li>                          

             <li>@Html.ActionLink("Menu2", "Index", "Menu2")</li>

     <li>@Html.ActionLink("Menu3", "Index", "Menu3")</li> 

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenu <b class="caret"></b></a>
                    <ul class="dropdown-menu">

             <li>@Html.ActionLink("Submenu1", "Index", "Submenu1")</li>
    <li>@Html.ActionLink("Submenu2", "Index", "Submenu2")</li>

                    </ul>
                </li>                    
            </ul>  
        </div>
</div>

CSS

.nav > li {
position: relative;
display: block;
}

.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}

.nav > li > a:hover,
.nav > li > a:focus {
 text-decoration: none;
 background-color: #eeeeee;
 }

.nav > li.disabled > a {
color: #999999;
}

.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}

.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}

 {
.navbar-nav .open .dropdown-menu {
 position: static;
 float: none;
 width: auto;
 margin-top: 0;
 background-color: transparent;
 border: 0;
 box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
 padding: 5px 15px 5px 25px;
}
 .navbar-nav .open .dropdown-menu > li > a {
 line-height: 20px;
 }
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
 background-image: none;
}
 .navbar-collapse {
 max-height: 340px;
 padding-right: 15px;
 padding-left: 15px;
 overflow-x: visible;
 border-top: 1px solid transparent;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 -webkit-overflow-scrolling: touch;
}

.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}

.navbar-collapse:after {
clear: both;
}

.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
1
  • Essa pergunta me ajudou a resolver um problema aqui também com o IE, você não acham que o titulo da pergunta deveria ser mudada para problemas com compatibilidade com IE? Agradeço.
    – Marconi
    Commented 22/12/2014 às 12:24

1 Resposta 1

2

Faça o teste, com este código, que especifica X-UA-Compatible como IE=EDGE

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
</head>

diga se resolveu

2
  • 1
    Show de bola @Tony ... funcionando perfeitamente agora! Commented 24/10/2014 às 17:20
  • 1
    Obrigado me ajudou aqui também.
    – Marconi
    Commented 22/12/2014 às 12:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .