0

我正在使用 Internet 应用程序模板编写一个 asp.net mvc 4 Web 应用程序。我观察到右上角的模板菜单,上面写着:Home Contact About.. 没有显示在 IE 7 中,但它显示在 IE 8、9、10 中。

所以我的问题是:

1) Why the menu is not shown in IE7 but it is shown in IE 8, 9, 10.
2) The menu shown in iE 8, 9 and 10 differ, the item are not
positioned in the same way.

有人可以帮我吗?

这是我的 _layout 视图,母版页:

<body>
    <header>
        <div class="content-wrapper">

            <div class="float-left">
                <section>@Html.ActionLink(
                                 " ",
                                 "Index",
                                 "Home",
                                 new
                                 {
                                    style = "background: url('" + Url.Content("~/images/HeaderLogo.gif") + "') no-repeat center left; display:block;  height:33px; width:162px;"
                                 }
                         )                    
                </section>

                <section>
                    <p class="site-title">@Resources.Resource.HeaderAppTitle</p>
                </section>                   
            </div>

            <div class="float-right">
                <table>
                <tr>
                <section id="login">
                    @Html.Partial("_LoginPartial")                                   
                </section>
                </tr>
                <tr>
                @Html.Partial("_CulturePartial")                    
                </tr>
                <tr>
                <nav id="NavigationMenu">
                    <ul id="menu">
                        <!--<li>@Html.ActionLink("Home", "Index", "Home")</li>-->
                        <li>@Html.ActionLink("Tests", "Index", "Tests")</li>
                        <li>@Html.ActionLink("Configure", "Configure", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
                </tr>
                </table>
            </div>
        </div>
    </header>
    <div id="body">
        <div class="errorMessage">
            @Html.ValidationSummary(true)
            @Html.ValidationMessage("errMessage")
        </div>

        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-right">
                <p>&copy; Copyright @Resource.CompanyName @DateTime.Now.Year</p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")


    @*@Content.Script("jquery-1.10.2.min.js", Url)*@
    @*@Content.Script("jquery-ui-1.10.3.min.js", Url)*@
    @Content.Script("jquery-1.9.1.js", Url)
    @Content.Script("jquery-ui-1.10.3.custom.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
    @Content.Script("jquery.dd.js", Url)
    @Content.Script("grid.locale-en.js", Url)        
    @Content.Script("jquery.jqGrid.min.js", Url)

    @RenderSection("scripts", required: false)
</body>

这是部分视图,_CulturePartial:

<div id="flagsGroup">
     <a href="@Url.Action("ChangeCulture", "Home", new { lang = "es-ES", returnUrl = this.Request.RawUrl })"><img src="~/images/SpanishFlag.png" alt="Change page language to spanish."/></a>
     <a href="@Url.Action("ChangeCulture", "Home", new { lang = "ca-ES", returnUrl = this.Request.RawUrl })"><img src="~/images/CatalanFlag.png" alt="Change page language to catalan."/></a>
     <a href="@Url.Action("ChangeCulture", "Home", new { lang = "en-GB", returnUrl = this.Request.RawUrl })"><img src="~/images/BritishFlag.png" alt="Change page language to english."/></a>
</div>

和 _LoginPartial:

@if (Request.IsAuthenticated) {
    <text>
        Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })!
        @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
            @Html.AntiForgeryToken()
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        }
    </text>
} else {
    @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })
}

更新:

如果我单击 Internet Explorer 兼容模式,我在这段代码中的 jquery-1.9.1.js 中出现错误:(实际上这里建议 ie6/7 不支持获取/设置...)

// IE6/7 do not support getting/setting some attributes with get/setAttribute
if ( !getSetAttribute ) {

    // Use this for any attribute in IE6/7
    // This fixes almost every IE6/7 issue
    nodeHook = jQuery.valHooks.button = {
        get: function( elem, name ) {
            var ret = elem.getAttributeNode( name );
            return ret && ( name === "id" || name === "name" || name === "coords" ? ret.value !== "" : ret.specified ) ?
                ret.value :
                undefined;
        },
        set: function( elem, value, name ) {
            // Set the existing or create a new attribute node
            var ret = elem.getAttributeNode( name );
            if ( !ret ) {
                elem.setAttributeNode(
                    (ret = elem.ownerDocument.createAttribute( name ))
                );
            }

下线是它崩溃的地方

                          ret.value = value += "";

            // Break association with cloned elements by also using setAttribute (#9646)
            return name === "value" || value === elem.getAttribute( name ) ?
                value :
                undefined;
        }
    };

    // Set contenteditable to false on removals(#10429)
    // Setting to empty string throws an error as an invalid value
    jQuery.attrHooks.contenteditable = {
        get: nodeHook.get,
        set: function( elem, value, name ) {
            nodeHook.set( elem, value === "" ? false : value, name );
        }
    };

    // Set width and height to auto instead of 0 on empty string( Bug #8150 )
    // This is for removals
    jQuery.each([ "width", "height" ], function( i, name ) {
        jQuery.attrHooks[ name ] = jQuery.extend( jQuery.attrHooks[ name ], {
            set: function( elem, value ) {
                if ( value === "" ) {
                    elem.setAttribute( name, "auto" );
                    return value;
                }
            }
        });
    });
}
4

1 回答 1

0

单击compatibility mode icon,这应该可以显示菜单。我猜这个问题归结为 CSS 没有被正确渲染。

Fix Display problems with compatibility mode.

于 2013-10-03T20:17:02.687 回答