Question

我在visual studio中使用默认生成的asp页面。（我已经编辑了一些CSS代码，但错误从一开始就存在）问题是菜单总是位于应该的位置以下，我不能通过up和padding这样的值来移动它。 / p>

CSS文件。

/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #999966;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 28px;
    line-height: 1.6em;
    height: auto;
    width: 926px;
}
/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 90%;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #009900;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 101px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

.header h1
{
    border-style: none;
    border-color: inherit;
    border-width: medium;
    font-weight: 700;
    padding: 0px 0px 0px 20px;
    color: #2c2cb0;
    line-height: 2em;
    font-size: 2em;
    width: 938px;
    height: 70px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}
.RightCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 810px;
    width: 150px;
    min-height: 200px;
    position: relative;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    background: #ffffff;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#000000;
    width:100%;
    height: 32px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #000000;
    color: #fafbba;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    color: #cfdbe6;
    text-decoration: none;
}
div ul:last-child li:last-child a:last-child 
{
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

的Site.Master

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title>title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/NormalText.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="Form1" runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1 style="text-align:left; font-size: 40px;"></h1>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
                    EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
                    onmenuitemclick="NavigationMenu_MenuItemClick">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Selelox" Value="Selelox"/>
                        <asp:MenuItem NavigateUrl="~/Programs.aspx" Text="Programs" ToolTip="You will find all programs here"/>
                        <asp:MenuItem Text="Profile" Value="Profile">
                            <asp:MenuItem NavigateUrl="~/Account/Login.aspx" Text="Login" Value="Login">
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/Account/Register.aspx" Text="Register" 
                                Value="Register"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Help" Value="Help">
                            <asp:MenuItem NavigateUrl="~/FAQ.aspx" Text="FAQ" Value="FAQ"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/ReportProblems.aspx" Text="Report problem" 
                                Value="Report problem"></asp:MenuItem>
                            </asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/Community/Forum.aspx" Text="Forum" ToolTip="Forum"/>
                    </Items>
                    <StaticItemTemplate>
                        <%# Eval("Text") %>
                    </StaticItemTemplate>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="clear"><div class="">
        </div>
    </div>
    </div>
    </form>
</body>
</html>

Answer 1

如果asp菜单呈现为div（不确定），则可以使用：

div.menu
{
...
    margin-top: -3px;
}

Answer 2

我无法在您的CSS中看到您如何包含菜单，但您可以尝试使用clearfix来查看它是否能解决您的问题。试试这个：

.menu:before, .menu:after {
display:table;
content:"";
zoom:1; /* IE fix */
}

.menu:after {
clear:both;
}

Answer 3

我找到的所有修复程序都没有为我工作，所以我使用了这个Chrome hack：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div.menu ul { top: -21px; }
    div.menu { height: 20px; }
}

在帖子reflexiv中借用here中的黑客。

个人里程可能会有所不同。

Chrome菜单错误，默认为asp页面

3 个答案: