Question

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

兼容性视图时：开：

navbar is centred fine. :)

兼容性视图时：关闭：

navbar is shifted to the right slightly. :(

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

显然我想纠正这个，但不能;因此，我在这里发帖的原因。：）

我的CSS文件如下所示：

/*background image for outside area*/
#outside {
    background-image:url('/images/body_bg.gif');
}

/*style for main area*/
#main {
    font:16px "Trebuchet MS", arial, verdana, serif, monospace;
    margin-left:auto;
    margin-right:auto;
    width:1020px;
    border:5px outset darkgrey;
    background-color:white;
}

/*background image*/
#bg {
    background-image:url('/images/content_bg.gif');
}

/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}

/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/

/*top navigation bar*/
#topnav ul {
    list-style-type:none;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    overflow:hidden;
}

#topnav li {
    float:left;
}

#topnav li a {
    background-color:#606060;
    color:white;
    display:block;
    font-size:large;
    font-weight:bold;
    font-variant:small-caps;
    padding-top:4px;
    padding-bottom:4px;
    text-align:center;
    text-decoration:none;
}

#topnav li a:active {
    color:yellow;
}

#topnav li a:hover {
    background-color:#888888;
}

/*topnav submenus*/
#topnav li ul {
    display:none;
    position:absolute;
}

#topnav li:hover ul {
    display:block;
}

#topnav li:hover li {
    float:none;
}

#topnav li:hover a {
    background-color:#888888;
}

#topnav li:hover li a {
    display:block;
    font-size:small;
    font-weight:normal;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
}

#topnav li:hover li a:hover {
    background-color:#B0B0B0
}

/*page title*/
h1 {
    border-bottom:3px solid black;
    color:gray;
    margin-left:auto;
    margin-right:auto;
    width:90%;
}

/*content*/
#content {
    margin-left:auto;
    margin-right:auto;
    width:90%;
}

我的_Layout.cshtml文件如下：

<!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>
}

请帮忙！

Answer 1

事实证明，我的导航栏需要添加{display:inline;} and {padding:0;}属性才能使其正常工作。

在这个问题上我不是真正的大师，我认为INLINE属性阻止它被相邻元素“推过”，并且PADDING:0;属性确保导航栏正确适合它的父元素。

如果一个“真正的大师”（比我更有经验的人）可以证实我的假设，那将非常感激。提前谢谢。

兼容性视图切换时，navbars移位

1 个答案: