个人中心
gpt4 book ai didi

IE 中的 CSS 导致左侧导航栏向右移动。在 Firefox 中运行良好。有任何想法吗？

转载 作者：太空宇宙 更新时间：2023-11-04 05:11:59 38 4
gpt4 key购买 nike

我有一个在 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>

站点.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; 
}

最佳答案

IE 需要显式设置 left 来配合绝对定位。在导航容器上设置 left:0 就可以了。

关于IE 中的 CSS 导致左侧导航栏向右移动。在 Firefox 中运行良好。有任何想法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9117994/

38 4 0
文章推荐： css - dotLess - 与以标签名称开头的选择器混合
文章推荐： Python 列表和函数，查找降雨量的最大/最小月份
文章推荐： python - 如何在命令行中使用 http.server 作为参数传递 file.py？
文章推荐： python - Pandas 是一段时间内的时间戳