Asp.net Chrome菜单错误，默认asp页面
我正在visual studio中使用默认生成的asp页面。（我已经编辑了一点CSS代码，但错误从一开始就存在了）问题是菜单总是稍微低于它应该的位置，我不能通过向上和填充等值将其向上移动 CSS文件Asp.net Chrome菜单错误，默认asp页面,asp.net,css,google-chrome,menu,Asp.net,Css,Google Chrome,Menu,我正在visual studio中使用默认生成的asp页面。（我已经编辑了一点CSS代码，但错误从一开始就存在了）问题是菜单总是稍微低于它应该的位置，我不能通过向上和填充等值将其向上移动 CSS文件 /* DEFAULTS ----------------------------------------------------------*/ body { background: #999966; font-size: .80em; font-family: "H
/* 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;
}
<%@ 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>
标题>
.menu:before, .menu:after {
display:table;
content:"";
zoom:1; /* IE fix */
}
.menu:after {
clear:both;
}
如果asp菜单呈现为div（不确定），则可以执行以下操作：
div.menu
{
...
margin-top: -3px;
}
我在任何地方找到的补丁都不适合我，所以我使用了这个Chrome黑客：
@media screen and (-webkit-min-device-pixel-ratio:0) {
div.menu ul { top: -21px; }
div.menu { height: 20px; }
}
- 个别里程可能有所不同