Элемент управления asp.net не отображается правильно в сафари - PullRequest
Новая
       33

Элемент управления asp.net не отображается правильно в сафари

8 голосов
/ 10 ноября 2008

Сайт, на котором я работаю, использует asp: элемент управления Databound Menu. При отправке 1 пункта меню он отображает HTML, который абсолютно корректен в Firefox (и IE), но действительно испортил код в Safari и Chrome. Ниже приведен код, который был отправлен каждому браузеру. Я протестировал несколько браузеров, и все они довольно схожи, поэтому я публикую только два варианта источника рендеринга.

У меня вопрос: как заставить ASP.NET отправлять тот же html и javascript в Chrome и Safari, что и в Firefox и IE? 

<!-- This is how the menu control is defined -->
<asp:Menu ID="menu" runat="server" BackColor="#cccccc"
    DynamicHorizontalOffset="2" Font-Names="Verdana" StaticSubMenuIndent="10px" StaticDisplayLevels="1"
    CssClass="left_menuTxt1" Font-Bold="true" ForeColor="#0066CC">
    <DataBindings>
        <asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text"
            ToolTipField="ToolTip" />
    </DataBindings>
    <StaticSelectedStyle BackColor="#0066CC" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="8px" />
    <DynamicMenuStyle BackColor="#fbfbfb" BorderColor="#989595" BorderStyle="Inset" BorderWidth="1"
        Width="80px" VerticalPadding="1" />
    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" Font-Name="Verdama"
        ForeColor="#c6c4c4" CssClass="left_menuTxt1" Font-Bold="true" />
    <DynamicSelectedStyle BackColor="#cccccc" HorizontalPadding="5px" VerticalPadding="2px"
        Font-Names="Verdama" CssClass="left_menuTxt1" Font-Bold="true" />
</asp:Menu>
<!-- From Safari View Page Source (Chrome source very similar) -->
<span title="Order" class="ctl00_leftNav_menu_4">
<a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
  href="javascript:__doPostBack('ctl00$leftNav$menu','oMy Order')">
My Order
<img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
alt="Expand My Order" 
align="absmiddle" 
style="border-width:0px;" /></a></span><br />


<!-- From Firefox View Page Source (IE View page similar) -->
<table>
<tr onmouseover="Menu_HoverStatic(this)" 
    onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(event)" 
    title="Order" 
    id="ctl00_leftNav_menun0">
  <td>
    <table class="ctl00_leftNav_menu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
       <td style="white-space:nowrap;width:100%;">
          <a class="ctl00_leftNav_menu_1 ctl00_leftNav_menu_3" 
             href="../Order/OrderList.aspx">
My Order
          </a>
       </td>
       <td style="width:0;">
           <img src="/WWW/WebResource.axd?d=glUTEfEv7p9OrdeaMxkMzhqz2JugrMr8aE43O2XGHAA1&amp;t=633590571537099818" 
                alt="Expand My Order" style="border-style:none;vertical-align:middle;" />
       </td>
     </tr>
  </table>
 </td>
</tr>
</table>

Обновление: мое сообщение о решении правильное ... но я не могу пометить свое как правильное ... поэтому, если кто-то захочет скопировать его, я могу закрыть это. :)

Ответы [ 9 ]

11 голосов
/ 10 ноября 2008

Я нашел это решение в комментарии к weblogs.asp.net . Это может быть взлом, но это работает.

Эта кросс-браузерная борьба за совместимость расстраивает. 

 if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
    {

        Request.Browser.Adapters.Clear();

    }

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

5 голосов
/ 04 февраля 2011

Я просто хотел представить альтернативный вариант. Это работает для ASP.NET 3.5.

  • Добавьте папку ASP.NET "App_Browsers" в свой проект
  • Создать файл браузера в этой папке

  • В файле браузера добавьте следующий код между тегом <browsers>:

    <browser id="Chrome" parentID="Safari1Plus">
    <controlAdapters>
    <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
    </controlAdapters>
    </browser>

Это должно правильно отображать элемент управления меню в Chrome / Safari.

5 голосов
/ 09 января 2009

Вот самый простой способ решить эту проблему как для Chrome, так и для Safari, если у вас есть несколько веб-приложений:

Создайте файл с именем safari.browser в «% SystemRoot% \ Microsoft.NET \ Framework [версия] \ CONFIG \ Browsers», который содержит следующее: 

<browsers>
    <browser refID="Safari1Plus">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType="" />
        </controlAdapters>
    </browser>
</browsers>

Это скажет asp.net не использовать адаптер при рендеринге элемента управления меню для сафари. Safari1Plus определяется в конце файла mozilla.browser в том же каталоге. Это работает и для chrome, потому что они оба используют webkit, как asp.net идентифицирует Safari1Plus.

Следующий запуск% SystemRoot% \ Microsoft.NET \ Framework [версия] \ aspnet_regbrowsers -i

это скомпилирует все файлы браузера в сборку и добавит их в GAC.

теперь меню asp.net будет корректно отображаться в Safari и Chrome.

В качестве альтернативы вы можете добавить файл в каталог App_Browsers в каждом из ваших веб-приложений.

5 голосов
/ 10 ноября 2008

У меня были проблемы с asp: управлением меню и webkit. К тому же, стиль, который я так хочу, сложно стилизовать. Я рекомендую использовать адаптеры дружественного управления CSS:

Это преобразует таблицу меню в более современную и оптимизированную для SEO разметку. Ваше меню будет выглядеть примерно так: 

<ul class="AspNet-Menu">
  <li class="Leaf Selected">
    <a href="Orders.aspx" class="Link Selected">Orders</a></li>
  <li class="ALeaf">
    <a href="MyOrders.aspx" class="Link">My Orders</a></li>
</ul>

В моем тестировании разметка одинакова во всех браузерах.

2 голосов
/ 22 сентября 2011

Работает как магия! 

    If Request.ServerVariables("http_user_agent").IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) <> -1 Or Request.UserAgent.Contains("AppleWebKit") Then
        Request.Browser.Adapters.Clear()
        Page.ClientTarget = "uplevel"
    End If
2 голосов
/ 11 июня 2010

Mayank Sharma нашел решение, которое работает с главными страницами, а не редактирует отдельные страницы. Все страницы, которые используют главную страницу, исправлены без проблем. Это все еще хак, но ты делаешь то, что должен. Ниже приведен пример мастер-страницы с базовыми образцами. 

using System;
using System.Web.UI;

/// <summary>
/// Summary description for ExampleMasterPage
/// </summary>
public class ExampleMasterPage : MasterPage
{    
    public ExampleMasterPage() { }

    protected override void AddedControl(Control control, int index)
    {
        if (Request.ServerVariables["http_user_agent"]
            .IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
        {
            this.Page.ClientTarget = "uplevel";
        }
        base.AddedControl(control, index);
    }
}
0 голосов
/ 06 мая 2011

Проблема с тем, что Chrome и Safari неправильно отображают элемент управления меню, связана с тем, что в Chrome и Safari отображается окно изображения с навигационной ссылкой.

Если вы сделаете css display: none; на изображении для скиплинка, то элемент управления меню будет располагаться так, как должен.

Я проверил это в простом 1-уровневом меню, а не во вложенных меню.

http://www.s -t-f-u.com / 2011/05/05 / жерех-сетчатой ​​меню управления позиционированием-в-сафари-Google-хром /

0 голосов
/ 29 июня 2010

Вот версия @Mayank Sharma / @jball C #, преобразованная в VB.NET. Спасибо за исправление, ребята, беспокоили меня в течение нескольких месяцев. Моя проблема заключалась в том, что все браузеры на MAC и ПК работали, кроме IE8 и Chrome. Но тогда Chrome, как мне нравится, часто не запускает Google Docs - решите это !!! 

Protected Overrides Sub AddedControl(ByVal control As Control, ByVal index As Integer)
    If Request.ServerVariables("http_user_agent").IndexOf("fake_user_agent", StringComparison.CurrentCultureIgnoreCase) <> -1 Then
      Me.Page.ClientTarget = "uplevel"
    End If
    MyBase.AddedControl(control, index)
  End Sub

Вы заметите, что мне пришлось проверять "fake_user_agent", а не "Safari".

0 голосов
/ 21 мая 2009

Добавление ClientTarget="uplevel" к директиве страницы делает так, что Safari работает: 

<%@ Page ClientTarget="uplevel" ... %>
...