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中运行良好。有任何想法吗？

回答

相关问题