1

IE9 の互換性ビューのオン/オフを切り替えると、ナビゲーション バーの位置が変わります。

互換表示：ONの場合：

navbar is centred fine. :)

互換表示：OFFの場合：

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>

navbar ファイルは次のようになります。

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

助けてください！

4

1 に答える 1

0

{display:inline;} and {padding:0;}私のナビゲーションバーは、それを機能させるために属性を追加する必要があることがわかりました。

このようなことの真の第一人者ではありませんが、INLINE属性が隣接する要素によって「押される」ことを防ぎ、PADDING:0;属性がnavbarが親要素に適切に収まることを保証したと思います。

「本当の第一人者」(私よりも経験豊富な人) が私の仮定を確認できれば、それは大歓迎です。前もって感謝します。

于 2012-04-26T12:24:29.230 に答える