Question

我正在开发一个使用ASP.NET 3.5和C＃的Web应用程序。在结构上，我有一个带有菜单控件的母版页。该控件用作我的导航，它从SiteMapDataSource控件和相应的Web.sitemap文件中获取其项目。

问题是指定CssClass属性时某些样式无法正确呈现。更具体地说，选定和悬停样式不响应css样式。请考虑以下代码：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A webpage</title>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
    <asp:Menu 
        ID="navMenu" 
        Orientation="Horizontal"
        StaticMenuStyle-CssClass="staticMenu"
        StaticMenuItemStyle-CssClass="staticMenuItem"
        StaticSelectedStyle-CssClass="staticSelectedItem"
        StaticHoverStyle-CssClass="staticHoverItem"
        runat="server">
    </asp:Menu>
    <asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" />
    <br />
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

假设我有一个相应的.css文件，其中包含以下内容：

.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }

会发生什么事情，我的项目背景将正确为红色，但我选择的项目不会是绿色，而我将鼠标悬停在其上的项目不会是蓝色。无论我是否在主页的头部或在web.config文件中指定的默认主题中的外部文件中包含样式，这似乎都是正确的。

如果我在asp.net xml中指定样式，如下所示：

<asp:Menu
    ID="navMenu"
    Orientation="Horizontal"
    runat="server">
<StaticSelectedStyle 
    BackColor="Green"
    Font-Underline="True"
    Font-Bold="True" />
<StaticHoverStyle 
    BackColor="Gray" />
</asp:Menu>

它似乎在Firefox中正常工作，但该样式从未嵌入到Internet Explorer的html中。奇

是否有人能够深入了解导致此问题的原因以及如何巧妙地解决这个问题？我知道我可能能够以编程方式确定当前页面并手动选择相应的菜单项，以便它接收到正确的样式类，但在我使用C＃和Javascript一起修复此功能之前，我愿意接受我的想法

Answer 1

很奇怪，当我使用我在新解决方案中提供的代码时，它工作得很好。显然，我原来的解决方案是使用ASP.NET 4.0，无论出于何种原因，复制此处给出的代码都不起作用。我尝试在Visual Studio中将ASP.NET 3.5指定为编译器，并且“它看起来很有效。”当我再次将ASP.NET 4.0设置为编译器时，它可以工作。

经过仔细检查，我发现将Visual Studio 2010解决方案从ASP.NET 3.5转换为ASP.NET 4.0会将webRenderingCompatibilityVersion属性设置为web.config文件中的“true”。这具有使菜单控件呈现为表（如3.5中所示）而不是列表项（如4.0中所示）的效果。删除此属性再次打破了页面，并将菜单控件的RenderingMode属性设置为“table”修复它。

因此，总而言之，这个错误似乎只存在于ASP.NET 4.0中，菜单控件呈现为列表，至少对我而言。如果有其他人有进一步的见解，我会很高兴听到它。

Answer 2

有同样的问题，将web.config - controlRenderingCompatibilityVersion从3.5改为4.0，问题解决了。

我认为这是在添加AjaxControlKit之后发生的。

这有效：

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
    <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
    </controls>
</pages>

Answer 3

我使用与您完全相同的开发环境，我可以生产一个菜单，默认情况下有红色项目，在悬停时变为蓝色，在绿色时变为绿色选择。我已将主题嵌入到web.config文件中。我使用IE 8.可能是IE版本的问题？格尔茨

Answer 4

在ASP.NEt 4.0中，它将实际的“selected”属性放在a标签的类中。所以我所做的就是用CSS定位它并确保我设置了我的标签大小，填充等而不是li，它就像一个梦想。

Answer 5

Hover在IE6中不起作用......这可能是你的问题。它可以通过javascript修复...... http://www.robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

母版页中的菜单控件无法使用CSS样式

5 个答案: