StaticMenuItemStyle и StaticSelectedStyle — один из них перезаписывает другой?

Я создаю собственный элемент управления asp:menu в ASP.NET, используя код С#. Он основан на карте сайта на моем сайте. Вот основы меню:

<%@ Control language="C#" autoeventwireup="true" codefile="Control.ascs.cs" inherits="menuClass" %>
<asp:menu id="myMenu" datasourceid="sitemap" runat="server">
    <staticmenuitemstyle font-underline="true" />
    <staticselectedstyle font-bold="true" font-underline="false" />
</asp:menu>

Должно быть совершенно очевидно, что я хочу, чтобы выбранный элемент меню был выделен жирным шрифтом, а не подчеркнут, а все остальные элементы были подчеркнуты. Проблема в том, что каждый элемент остается подчеркнутым, хотя выбранный элемент становится жирным.

Интересным тестом было поменять местами оба логических значения подчеркивания. В результате выбранный элемент стал подчеркнутым, в то время как все остальные элементы не были подчеркнуты. Это ожидаемый результат, но он сбивает с толку при рассмотрении проблемы, с которой я столкнулся.

Я пытался использовать атрибут cssclass, чтобы обойти эту проблему, но безрезультатно. Спасибо.


asp.net user-controls underline aspmenu
person TahoeWolverine    schedule 04.11.2009    source источник
comment
Может ли кто-нибудь просто попытаться воспроизвести это хотя бы?   -  person TahoeWolverine    schedule 10.11.2009

Ответы (1)


arrow_upward
3
arrow_downward

Хитрость заключается в использовании CssClass и применении CSS только к гиперссылке (элемент «a»), а не к окружающей HTML-таблице, которую ASP.NET использует для отображения пункта меню. Вот пример автономного кода, иллюстрирующий поведение, которое вы ищете:

<%@ Page Language="C#"%>
<!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 runat="server">
    <style type="text/css">
    .notSelected a
    {
        text-decoration:underline;
    }
    .selected a
    {
        font-weight:bold;
        text-decoration:none;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:menu id="myMenu" runat="server">
            <StaticMenuItemStyle CssClass="notSelected" />
            <StaticSelectedStyle CssClass="selected" />
            <Items>
                <asp:MenuItem Text="Test (selected)" Selected="true" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                <asp:MenuItem Text="Test (not selected)" NavigateUrl="~/Default.aspx"></asp:MenuItem>
            </Items>
        </asp:menu>
    </div>
    </form>
</body>
</html>

Основная причина этой проблемы, по-видимому, заключается в том, как браузеры обрабатывают несколько конфликтующих стилей оформления текста, определенных в разных классах CSS, применяемых к одним и тем же элементам A, и, возможно, также в том, как браузеры обрабатывают наследование от родителя, к которому также применяются те же стили. (Элементы управления меню ASP.NET используют классы CSS под капотом для определения «встроенных» стилей, таких как «атрибут» font-underline, и они применяют те же стили к элементам A, что и к родительским элементам. Взгляните на View Source HTML испускается моим образцом выше или вашим кодом, чтобы лучше понять, как это работает.)

Я наткнулся на трюк с вложенным CSS несколько случайно, когда пытался сузить круг причин проблемы. Кажется, что если вы применяете CSS только к элементам A, комбинирование работает лучше. Вы, вероятно, можете экспериментально вывести базовые правила, выполнив View Source для сгенерированного HTML и выборочно изменяя стили классов CSS, применяемых к каждому элементу.

Вы также можете попытаться расшифровать спецификацию CSS о том, как наследование и конфликты работают с классами CSS, но я подозреваю, что экспериментировать будет проще. :-)

person Justin Grant    schedule 13.11.2009
comment
Мне нравится ваш ответ, особенно потому, что это простое решение, но я не понимаю, чем это отличается от перечисления атрибутов стиля в строке. Можете ли вы объяснить разницу здесь? - person TahoeWolverine; 16.11.2009
comment
Я отредактировал свой ответ, указав некоторые подробности. Я точно не знаю, почему это работает, но, надеюсь, я указал вам правильное направление, чтобы определить основные правила, регулирующие это поведение. - person Justin Grant; 16.11.2009