IE中的CSS導致左側導航欄向右移動。在Firefox中運行良好。有任何想法嗎？

我有一個導航欄，在firefox中正確顯示（一直向左），但它被移動到右側〜導航欄的寬度，所以導航欄應該是一個大的空白區域，然後導航欄僅覆蓋我的內容框的左側部分。有什麼方法可以解決這個問題嗎？IE中的CSS導致左側導航欄向右移動。在Firefox中運行良好。有任何想法嗎？

母版頁：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="RedSideMenu.master.cs" Inherits="MasterPage" %> 

<%@ Register TagPrefix="uc" TagName="Header" Src="~/Controls/Header.ascx" %> 
<%@ Register TagPrefix="uc" TagName="Footer" Src="~/Controls/Footer.ascx" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>NFD Purchase Approval Tracking Tool</title> 
    <link href="<%= ResolveClientUrl("Styles/Site.css") %>" rel="stylesheet" type="text/css" /> 
    <link href="<%= ResolveClientUrl("Styles/leftMenu.css") %>" rel="stylesheet" type="text/css" /> 
    <link href="<%= ResolveClientUrl("Styles/jquerySmoothness.css") %>" rel="stylesheet" type="text/css" /> 
    <script src="<%= ResolveClientUrl("Scripts/jquery-1.4.1.js") %>" type="text/javascript" > </script> 
    <script src="<%= ResolveClientUrl("Scripts/Jquery.min.js") %>" type="text/javascript" > </script> 
    <script src="<%= ResolveClientUrl("Scripts/menu.js") %>" language="javascript" type="text/javascript" > </script> 
    <script src="<%= ResolveClientUrl("Scripts/jquery-ui-1.8.10.custom.min.js") %>" type="text/javascript" > </script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 

     <!-- Header Object - Pass values for width and titles, etc. --> 
     <uc:Header runat="server" ID="headerTest" /> 

    <div id="pageDiv" class="page">   
     <!-- Left Navigation Bar --> 
     <div id="leftNavBar" class="leftNavBar"> 
      <ul class="menu"> 
       <li><a href="<%= ResolveClientUrl("Default.aspx") %>" >Home</a></li> 
       <li> 
        <a href="#">Resources</a> 
        <ul class="acitem"> 
         <li><a href="<%= ResolveClientUrl("Default.aspx") %>">Searches</a></li> 
         <li><a href="<%= ResolveClientUrl("Default.aspx") %>">Dashboards</a></li> 
        </ul> 
       </li> 
       <li><a href="<%= ResolveClientUrl("Default.aspx") %>" >What's New?</a></li> 
       <li><a href="<%= ResolveClientUrl("Default.aspx") %>" >Training</a></li> 
       <li> 
        <a href="#" >Mailing List</a> 
        <ul class="acitem"> 
         <li><a href="<%= ResolveClientUrl("admin/ViewMailingList.aspx") %>">View</a></li> 
         <li><a href="<%= ResolveClientUrl("admin/MailingListRegistration.aspx") %>">Registration</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#" >System Admins</a> 
        <ul class="acitem"> 
         <li><a href="<%= ResolveClientUrl("admin/maintainProfiles.aspx") %>">Maintain Profiles</a></li> 
         <li><a href="<%= ResolveClientUrl("admin/ViewProfiles.aspx") %>">View Profiles</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- Main Content Holder --> 
     <div class="main"> 
      <div class="PageHeader"> 
       <asp:ContentPlaceHolder ID="MainContentHeader" runat="server"/> 
      </div> 
      <div class="PageContent"> 
       <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
      </div> 
     </div> 

     <div class="clear"> 
     </div>  
    </div> 

    <!-- Footer --> 
    <uc:Footer runat="server" ID="Footer" /> 

    </form> 
</body> 
</html>

的site.css：

/* Defaults  */ 
* { padding:0; margin:0; } 
BODY 
{ 
    font-size: 13px; 
    color: #333; 
    margin:0px; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
} 
P 
{ 
    font-size: 13px; 
    color: #333; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
} 
DIV 
{ 
    font-size: 13px; 
    color: #333; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
} 

a 
{ 
    color: #000; 
    text-decoration: none 
} 
a:link 
{ 
    color: #000; 
    text-decoration: none 
} 
a:hover 
{ 
    color: #ce1126; 
    text-decoration:: none 
} 

/* Left Nav Bar */ 
div.leftNavBar 
{ 
    border-right:#AC9F89 1px solid; 
    margin:0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    background: #CCC2B2; 
    width:128px; 
    height: 100%;; 
    position:absolute; 
    display:inline; 
} 

div.page 
{ 
    border: #CCC 1px solid; 
    width: 100%; 
    height: 100%; 
} 

div.PageHeader 
{ 
    width:95%; 
    text-align:left; 
    background:#880C1B; 
    border-left: #880C1B 1px solid; 
    border-right: #880C1B 1px solid; 
    color:#FFF; 
    /*background-image:url(../images/content_box_head_bg.jpg); background-repeat:repeat-x;*/ 
    background: #880C1B; /* for non-css3 browsers */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#7e99a4), to(#9db5bf)); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #880C1B, #66000E); /* for firefox 3.6+ */ 
    padding:4px; 
    height:42px; 
    font-size:20px; 
} 

div.PageContent 
{ 
    width:95%; 
    background:#E5DBCC; 
    color:#000; 
    border-left: #7C96A1 1px solid; 
    border-bottom:#7C96A1 1px solid; 
    border-right:#7C96A1 1px solid; 
    padding: 4px; 
    overflow: hidden; 
    text-align:justify; 
    min-height:400px; 
} 

div.main 
{ 
    width: 85%; 
    margin-right: auto; 
    margin-top: 10px; 
    margin-left: 140px; 
    margin-bottom: 10px; 
    font-size: 11px; 
    /*position:relative; */ 
    /*border: #CCC 1px solid; */ 
    overflow:visible; 
} 

form 
{ 
    width:900px; 
    height:500px; 
    position:relative; 
    margin-right: auto; 
    margin-left: auto; 
}

來源

2012-02-02 shawleigh17

代碼。向我們展示代碼。 – 2012-02-02 18:42:04

編輯顯示代碼。謝謝。 – shawleigh17 2012-02-02 18:50:49

IE需要一個明確的設定left陪絕對定位。在導航容器上設置left:0，它將工作。

來源

2012-02-02 18:57:44

太棒了！這工作。非常感謝您的幫助。 – shawleigh17 2012-02-02 19:27:08

IE中的CSS導致左側導航欄向右移動。在Firefox中運行良好。有任何想法嗎？

回答

相關問題