【发布时间】：2012-05-06 13:50:08
【问题描述】：
当我打开/关闭 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">© 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>
}
请帮忙！
【问题讨论】：
-
您指定您的站点是否支持兼容模式。不应该像您所描述的那样要求您同时支持两者。
-
对不起，我想我的意思是 IE 的兼容性视图；当我切换它时，我的导航栏到处都是。 :(
-
我误读了您的问题。它在兼容性视图中有效，但在使用标准 IE7、IE8 和 IE9 视图时无效。您目前正在查看哪种渲染模式？
-
我怎么知道？ :)
-
JS Fiddle jsfiddle.net/2auzn/1 您遇到的具体问题是什么？导航看起来不错...
标签： css position compatibility mode shift