Fatal编程技术网
  • css/
  • Css 切换兼容性视图时导航栏会移动

Css 切换兼容性视图时导航栏会移动

css

Css 切换兼容性视图时导航栏会移动,css,position,compatibility,mode,shift,Css,Position,Compatibility,Mode,Shift,当我打开/关闭IE9的兼容性视图时，我的导航栏会移动位置： 兼容性视图打开时： 兼容性视图关闭时： 注意：由于某些站点限制，我无法附加屏幕截图： 显然，我想纠正这一点，但不能；因此，我为什么在这里发帖： 我的CSS文件如下所示： @if (WebSecurity.IsAuthenticated) { if (!Roles.IsUserInRole("admin")) { <ul class="four"> <li><a

当我打开/关闭IE9的兼容性视图时，我的导航栏会移动位置：

兼容性视图打开时：

兼容性视图关闭时：

注意：由于某些站点限制，我无法附加屏幕截图：

显然，我想纠正这一点，但不能；因此，我为什么在这里发帖：

我的CSS文件如下所示：

@if (WebSecurity.IsAuthenticated) {
    if (!Roles.IsUserInRole("admin")) {
        <ul class="four">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    } else { //logged in as administrator
        <ul  class="five">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Admin</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Admin/Cardrooms.cshtml")">Cardrooms</a></li>
                    <li><a href="@Href("~/Account/Events.cshtml")">Events</a></li>
                    <li><a href="@Href("~/Account/Members.cshtml")">Members</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    }
} else {
    // nav bar when NOT logged in
    <ul class="four">
        <li><a href="@Href("~/Default.cshtml")">Home</a></li>
        <li><a href="@Href("~/Rules.cshtml")">Rules</a></li>
        <li><a href="@Href("~/Account/Login.cshtml")">Login</a></li>
        <li><a href="@Href("~/Account/RequestMembership.cshtml")">Request Membership</a></li>
    </ul>
}
My_Layout.cshtml文件如下所示：

@if (WebSecurity.IsAuthenticated) {
    if (!Roles.IsUserInRole("admin")) {
        <ul class="four">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    } else { //logged in as administrator
        <ul  class="five">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Admin</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Admin/Cardrooms.cshtml")">Cardrooms</a></li>
                    <li><a href="@Href("~/Account/Events.cshtml")">Events</a></li>
                    <li><a href="@Href("~/Account/Members.cshtml")">Members</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    }
} else {
    // nav bar when NOT logged in
    <ul class="four">
        <li><a href="@Href("~/Default.cshtml")">Home</a></li>
        <li><a href="@Href("~/Rules.cshtml")">Rules</a></li>
        <li><a href="@Href("~/Account/Login.cshtml")">Login</a></li>
        <li><a href="@Href("~/Account/RequestMembership.cshtml")">Request Membership</a></li>
    </ul>
}
导航栏文件如下所示：

@if (WebSecurity.IsAuthenticated) {
    if (!Roles.IsUserInRole("admin")) {
        <ul class="four">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    } else { //logged in as administrator
        <ul  class="five">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Admin</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Admin/Cardrooms.cshtml")">Cardrooms</a></li>
                    <li><a href="@Href("~/Account/Events.cshtml")">Events</a></li>
                    <li><a href="@Href("~/Account/Members.cshtml")">Members</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    }
} else {
    // nav bar when NOT logged in
    <ul class="four">
        <li><a href="@Href("~/Default.cshtml")">Home</a></li>
        <li><a href="@Href("~/Rules.cshtml")">Rules</a></li>
        <li><a href="@Href("~/Account/Login.cshtml")">Login</a></li>
        <li><a href="@Href("~/Account/RequestMembership.cshtml")">Request Membership</a></li>
    </ul>
}
请帮忙

事实证明，我的导航栏需要添加{display:inline；}和{padding:0；}属性才能工作

我不是这方面的真正专家，我假设INLINE属性阻止了它被它的相邻元素推倒，并且填充：0；属性确保导航栏在其父元素中正确匹配

如果一个真正的大师，一个比我更有经验的人能够证实我的假设，那将是非常感激的。提前感谢。

您可以指定站点是否支持兼容模式。不应该像你描述的那样要求你同时支持这两个方面。对不起，我想我指的是IE的兼容性视图；当我切换时，我的导航条到处都是我误解了你的问题。它在兼容性视图中工作，但在使用标准IE7、IE8和IE9视图时不工作。您当前使用的是哪种渲染模式？我如何判断？JS Fiddle您遇到的确切问题是什么？导航看起来很好。。。 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>C4DP - @Page.Title</title>
        <link href="@Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/scripts/functions.js"></script>
        <script type="text/javascript" src="/scripts/sorttable.js"></script>
    </head>
    <body id="outside">
        <div id="main">
            <img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
            <div id="bg">
                <div id="topnav">@RenderPage("~/navbar_Top.cshtml")</div>
                <h1>@Page.Title</h1>
                <div id="content">
                    @RenderBody()
                </div>
                <div id="bottomnav">@RenderPage("~/navbar_Bottom.cshtml")</div>
            </div>
            <p id="copyright">&copy; 2012 C4DP. All rights reserved.</p>
        </div>    
    </body>
</html>

@if (WebSecurity.IsAuthenticated) {
    if (!Roles.IsUserInRole("admin")) {
        <ul class="four">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfour">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    } else { //logged in as administrator
        <ul  class="five">
            <li><a href="@Href("~/Account/News.cshtml")">News</a></li>
            <li><a href="#">Stats</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/Earnings.cshtml")">Earnings</a></li>
                    <li><a href="@Href("~/Account/SessionAverage.cshtml")">Session Average</a></li>
                    <li><a href="@Href("~/Account/Ranking.cshtml")">Ranking</a></li>
                </ul>
            </li>
            <li><a href="#">Admin</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Admin/Cardrooms.cshtml")">Cardrooms</a></li>
                    <li><a href="@Href("~/Account/Events.cshtml")">Events</a></li>
                    <li><a href="@Href("~/Account/Members.cshtml")">Members</a></li>
                </ul>
            </li>
            <li><a href="#">Profile</a>
                <ul class="sfive">
                    <li><a href="@Href("~/Account/UserProfile.cshtml")">Personal Info.</a></li>
                    <li><a href="@Href("~/Account/ChangePassword.cshtml")">Change Password</a></li>
                </ul>
            </li>
            <li><a href="@Href("~/Account/Logout.cshtml")">Logout</a></li>
        </ul> 
    }
} else {
    // nav bar when NOT logged in
    <ul class="four">
        <li><a href="@Href("~/Default.cshtml")">Home</a></li>
        <li><a href="@Href("~/Rules.cshtml")">Rules</a></li>
        <li><a href="@Href("~/Account/Login.cshtml")">Login</a></li>
        <li><a href="@Href("~/Account/RequestMembership.cshtml")">Request Membership</a></li>
    </ul>
}