Menu with Bootstrap Internet Explorer 9

Asked

Viewed 199 times

1

I have a page that works normally. However I stopped the application by Internet Explorer 9, and the menu behaved as if it were a Mobile menu.

Follow the image to better understand:

Demonstração

Other browsers work normally. I am using Bootstrap 3 and Jquery 2.1.1

Follows my layout:

@{
        Layout = null;
        ViewBag.Title = "";
    }
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymask")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/jquery.jeditable.js"></script>
    <script src="~/Scripts/jquery.dataTables.editable.js"></script>
    <script src="~/Scripts/jquery-ui-1.11.2.min.js"></script>
    <link href="~/Content/themes/start/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" />
    <script src="~/Scripts/select2.min.js"></script>
    <link href="~/Content/select2/css/select2-bootstrap.css" rel="stylesheet" />
    <link href="~/Content/select2/css/select2.css" rel="stylesheet" />
    <script src="~/Scripts/prettify.js"></script>
    <script src="~/Scripts/jquery.maskedinput.js"></script>
    <title>CETIL - Atendimento ao Servidor</title>
    <link href="~/Content/default.css" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/Content/Inicial.css")" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->




    <style type="text/css">
        .imageA {
            position: absolute;
            left: 500px;
            top: 0px;
        }

        .mapLocal {
            position: absolute;
            left: 115px;
            top: 60px;
            font-size:13px;
        }

        .Nome {
            position: absolute;
            left: 860px;
            top: 220px;
        }
    </style>
</head>

<body>
    <a><img src="~/Content/img/img_top.png" width="361" height="54" class="imageA"></a>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <br />
        <br />
        <br />
        @RenderSection("navigation", required: false)
        @Html.Partial("_MenuCompleto")

        <tr>
            <td height="93">@RenderBody()</td>
            <td></td>
        </tr>
        <tr></tr>
        <tr>
            <br />
        </tr>
        <tr>
            <td></td>
        </tr>

    </table>
    <table>
        <tr>
            <td height="19" align="center">
                <table width="450">
                    <tr>
                        <td></td>
                        <td width="198"></td>
                    </tr>
                </table>
            </td>
            <td></td>
        </tr>
        <tr>
            <td height="19" align="center">&nbsp;</td>
            <td></td>
        </tr>
        <tr>
            <td height="19" align="center">&nbsp;<p>@TempData["Mensagem"] @Html.ValidationSummary(true)</p></td>
            <td></td>
        </tr>
        <tr> <td height="19" align="center">&nbsp;</td> <td></td> </tr>
    </table>



    <div class="container body-content">

        <hr />
        <div align="center">
            <footer>
                <p>&copy; @DateTime.Now.Year - Portal RH - <a href="http://www.vilavelha.es.gov.br" target="_blank">Prefeitura Municipal de Vila Velha</a></p>
            </footer>
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

And even with the menu in the format as if it were a mobile device, it does not open by clicking on it.

1 answer

1


The problem was the Jquery version. I put version 1.7 of Jquery and the application worked normally in IE 9 to IE 11.

  • Jquery is in version 1.11.2, using outdated versions with updated plugins is what causes the problem. Your solution was just a lucky shot (sorry for the sincerity) :) Please try to update everything possible.

  • Sorry, it’s just that I’ve always used version 2.x, I’ve only been back because of this problem. But I was looking at the Jquery website, and it has 2 updated options. 1.11.2 and 2.1.3. The difference between the two and only Support for IE 6, 7 and 8? Or have any other.

  • It’s not just old IE, iphone with ios5 and android2. ! also do not work with jquery2., I personally prefer the jquery1.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.