Question

我正在创建一个asp.net网页，一些自动生成的CSS已经超过了我的样式表。我不确定属性在哪里正确设置值，或者如何通过我的Web应用程序禁用自动生成的CSS。这是代码。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs"     Inherits="pigninja.FrontEnd" %>

<!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 id="Head1" runat="server" >
<title>Title</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        Width="100%"   StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp">
    <Items>
        <asp:MenuItem NavigateUrl="../Default.aspx" Text="Home" Value="Home">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../About.aspx" Text="About Me" Value="About Me">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Programming.aspx" Text="Programming" 
            Value="Programming"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Rants.aspx" Text="Rants" Value="Rants">
        </asp:MenuItem>
    </Items>
</asp:Menu></div>
<div id ="content"><asp:ContentPlaceHolder ID="Content" runat="server"> 
</asp:ContentPlaceHolder></div>
<div id="footer"><p>Footer</p></div>
</div>
</form>
</body>
</html>

这是css

*
{
font-family: Arial, Sans-Serif;
}

body
{
margin: 0;
background-color:Black;
}

a
{
text-decoration: none;
color: #b30707;
} 

a:hover
{
text-decoration: underline;
}

#header
{
background-image: url(../img/header.jpg);
position:relative;
margin:auto;
height: 250px;
}

#pageWrapper
{
width:844px;
margin: auto;
background-color:#ccc;
}

#navigation
{
width: auto;
text-align:center;
height: 36px;
padding-top: 15px;
padding-left: 17px;
background-color: #9C989A
}

#content
{
border-style:solid;
border-width: 2px;
border-color: #b30707;
padding: 15px;
}

#footer
{
text-align:center;
}

我添加了这一行以避免我的菜单控件没有正确跨越父元素的问题。我计划在CSS按预期工作后删除它。

StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp"

以下是所请求的呈现代码。

<!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 id="Head1"><title>
Title
</title><link href="Styles/Styles.css" rel="Stylesheet" type="text/css" /><style   type="text/css">
/* <![CDATA[ */
#Menu1 { width:100%; }
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout { background-image:url("/WebResource.axd?  d=xjCds24on9XfE0DBajC4vRjqPwEZnPWc2oYtv118cqG5ViUhvTqbbGX-  kFRHBgPTk01twuHMnUgYwxiSOFVm4FdDFd1DRzkQC6dPTjhsTD81&t=634773918900000000");background-  repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"     value="/wEPDwULLTEwMDUyNjYzMjhkZMqkGL/k2S4bUfDNJETNEEgreeQwj//8qMPH/3Jfp1j8" />
</div>


<script src="/WebResource.axd?d=JhWUzx8WLq0au7xqJj_xdb8v-NEKpWcJ1R4twSIpfaW-Hg2- LRc2Fqrqmb31NCEsThyJFzieaKJwGQI8BjHNp9tN4M8jNjJ1fHS70aQkb681&amp;t=634773918900000000"   type="text/javascript"></script>
 <div id="pageWrapper">
<div id="header"></div>
<div id="navigation"><a href="#Menu1_SkipLink"><img alt="Skip Navigation Links"  src="/WebResource.axd? d=uVlrphLtejMyCQfMUd5MSwr7OFiIQBNYbtiTqDgsAQmI5_6XjhY8AFmAwPz4RAV7D87YEb3m48XzVHtpmam77PhCI6     AVXXVAbALWvpCcB1w1&amp;t=634773918900000000" width="0" height="0" style="border- width:0px;" /></a><div id="Menu1">
<ul class="level1">
    <li><a class="level1"  href="Default.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Home &nbsp</a>   </li><li><a class="level1"  href="About.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  About Me  &nbsp</a></li><li><a class="level1"  href="Programming.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Programming  &nbsp</a></li><li><a class="level1"  href="Rants.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Rants &nbsp</a>   </li>
</ul>
</div><a id="Menu1_SkipLink"></a></div>
<div id ="content">
<p>Content</p>
</div>
 <div id="footer"><p>Footer.</p></div>
</div>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Answer 1

我最终做的是关闭通过属性窗口内联应用的CSS。更具体地说，我将“IncludeStyleBlock”属性设置为false。在我这样做之前，我从我的视图源中获取了自动生成的CSS并将其放在我的样式表中。然后我能够更好地控制CSS，但它没有解决我的问题。为了解决我的问题，我必须在我的asp：Menu块中包含一个CssClass =“menuClass”。

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        IncludeStyleBlock="False" StaticEnableDefaultPopOutImage="False"    CssClass="menuClass">

然后我依次设置我的CSS属性。

.menuClass a.static.highlighted
{
color:Red !important;
text-decoration:underline !important;
}

Answer 2

默认的Menu控件notoriously对CSS不友好您可以使用css友好的菜单控件适配器解决此问题。

看一下asp.net团队提供的这个Menu control adapter 它将帮助你摆脱很多CSS hacks，否则需要设置asp.net菜单的样式。

如果您不了解控制适配器，则应参考walk through开始使用。

Answer 3

ASP.NET放入的锚标记会自动在菜单上方添加额外的垂直空间。锚标记会自动放在菜单上方，这会在Internet Explorer和Google Chrome中搞砸渲染。它可以在Mozilla Firefox中正常工作，即使是带有图像的锚点。

要修复，请将SkipLinkText =“”属性添加到ASP.NET菜单控件中，这将解决渲染问题。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

asp.net过骑css菜单控件

3 个答案: