Master Page中的菜單控件無法使用CSS樣式

我正在使用ASP.NET 3.5和C＃的Web應用程序。在結構上，我有一個主菜單頁面，上面有一個菜單控件。該控件用作我的導航，它從SiteMapDataSource控件和相應的Web.sitemap文件中獲取它的項目。Master Page中的菜單控件無法使用CSS樣式

問題是某些樣式在指定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一起修復此功能之前，我會接受想法。

來源

2010-06-02 Shaun

很奇怪的是，當我使用我在全新解決方案中提供的代碼時，它完美地工作。顯然，我原來的解決方案是使用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後，web.config文件中的controlRenderingCompatibilityVersion屬性設置爲「true」。這導致菜單控件呈現爲一個表格（如3.5所示），而不是列表項目（如4.0所示）。刪除此屬性再次破壞了頁面，並將菜單控件的RenderingMode屬性設置爲「table」來修復它。

因此，總而言之，這個錯誤似乎只存在於ASP.NET 4.0中，菜單控件呈現爲列表，至少對我而言。如果有其他人有進一步的見解，我很樂意聽到它。

來源

2010-06-07 02:32:37 Shaun

更奇怪的是，我有這個問題，但只在我的生產環境 - 兩個環境都有.NET 4，但生產使用IIS7 - 這是唯一的區別，我可以制定！不錯的答案，但我會把它設置爲「表」，看看是否修復它 – 2011-02-16 20:33:53

懸停在IE6中不起作用...這可能是您的問題。它可以固定使用JavaScript雖然... http://www.robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

來源

2010-06-03 04:47:52

也...請檢查您的菜單項得到分配的適當類/樣式（選擇查看網頁源代碼）。您可以更進一步，使用Firebug查看正在應用哪些樣式以及哪些樣式正在被覆蓋。 – 2010-06-03 04:51:52

嗯，由於asp.net經常使用javascript呈現控件並將用戶的瀏覽器考慮在內，這看起來像是一種相當奇怪的疏忽，但如果沒有其他方式，就必須完成。此外，仔細檢查後，即使我設置了Menu控件的StaticSelectedStyle-CssClass屬性，它在html中的設置也不正確。相反，它只是一個名爲「selected」的類，並將樣式應用於#navMenu a.selected將實際上對選定頁面進行樣式設置。多麼不一致。不過，我會堅持希望有一個比JavaScript和不一致的CSS更好的方法。 – Shaun 2010-06-03 06:45:56

我使用完全相同的開發環境和你一樣，我能產生它在默認情況下紅色的物品，當選擇這成爲懸停和青藍色的菜單。我在web.config文件中嵌入了主題。我使用IE 8.可能是IE版本的問題？ Greetz

來源

2010-06-03 09:40:21 AGuyCalledGerald

顯然我在使用Visual Studio 2010配置時遇到了一些麻煩;我已經能夠在IE8中使用IIS7的xml首選項來正確呈現樣式。我必須清理那個。我當然很欣賞你對它的看法。但是，我仍然無法將外部CSS類用於選定的懸停樣式，而無需在呈現菜單控件時將任何從Asp.net命名方案中播放的東西一起入侵。你是否在xml表單中指定了樣式，還是可以使外部樣式表工作？ – Shaun 2010-06-03 10:49:41

我使用了外部樣式表。但是，當然，我仍然使用VS 2008，並且在這個方向上沒有問題;）有趣的問題。 – AGuyCalledGerald 2010-06-03 11:04:23

在ASP.NEt 4.0中，它將實際的「selected」屬性放在a標籤的類中。所以我所做的就是用CSS來定位它，並確保我設置了標籤的大小，填充等而不是li，並且它像夢一樣工作。

來源

2010-08-16 00:13:21 Tyrus

發生同樣的問題，將web.config --controlRenderingCompatibilityVersion從3.5更改爲4.0，問題就解決了。

我認爲這是在添加AjaxControlKit後發生的。

這工作：

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

您的網頁在Firefox/ID開放

來源

2012-07-04 10:26:10 Sean

Master Page中的菜單控件無法使用CSS樣式

回答

相關問題