Điều khiển menu asp.net không được chỉnh sửa chính xác trong safari

Question

Trang web tôi đang thực hiện đang sử dụng điều khiển Menu theo trình đơn. Khi gửi 1 mục trình đơn, nó sẽ hiển thị HTML hoàn toàn chính xác trong Firefox (và IE), nhưng thực sự làm sai lệch mã trong Safari và Chrome. Dưới đây là mã được gửi tới từng trình duyệt. Tôi đã thử nghiệm nó một vài trình duyệt và tất cả chúng đều được hiển thị khá giống nhau, vì vậy tôi chỉ đăng hai biến thể trên nguồn hiển thị.

Câu hỏi của tôi là: Làm cách nào để có ASP.NET gửi cùng một tệp html và javascript tới Chrome và Safari giống như Firefox và 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> 

Cập nhật: giải pháp bài của tôi là đúng .. nhưng tôi không thể đánh dấu riêng của tôi như là đúng ... vì vậy nếu có ai muốn sao chép nó để tôi có thể đóng này. :)

Answer 1

Tôi tìm thấy giải pháp này từ nhận xét trên weblogs.asp.net. Nó có thể là một hack, nhưng nó hoạt động.

Cuộc đấu tranh tương thích trình duyệt chéo này đang trở nên khó chịu.

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

     Request.Browser.Adapters.Clear(); 

    } 

Nếu ai đó có giải pháp tốt hơn không quá nhiều, tôi sẽ biết ơn nếu bạn đăng. Và từ các tìm kiếm trên web mở rộng của tôi, có vẻ như tôi không đơn độc với vấn đề này với điều khiển menu, vì vậy một số tài liệu tham khảo tốt sẽ giúp những người khác trong cùng một tình huống.

Answer 2

Tôi đã gặp sự cố với điều khiển menu và webkit asp. Thêm vào đó là khó để tạo kiểu chính xác theo cách tôi muốn. Tôi đề nghị là sử dụng thân thiện kiểm soát Adapters CSS:

• http://www.asp.net/cssadapters/
• http://www.asp.net/CSSAdapters/Menu.aspx

này chuyển bảng của trình đơn vào đánh dấu giống hiện đại hơn và SEO thân thiện. Thực đơn của bạn sẽ trông giống như sau:

<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> 

Trong thử nghiệm của tôi, đánh dấu này giống nhau ở tất cả các trình duyệt.

Answer 3

Dưới đây là cách dễ nhất để khắc phục vấn đề này cho cả Chrome và Safari nếu bạn có nhiều ứng dụng web:

Tạo một file có tên safari.browser trong "% SystemRoot% \ Microsoft.NET \ Framework [version] \ CONFIG \ Trình duyệt" có chứa những điều sau đây:

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

này sẽ cho asp.net không sử dụng một bộ chuyển đổi khi vẽ sự kiểm soát thực đơn cho safari. Safari1Plus được định nghĩa ở cuối tệp mozilla.browser trong cùng một thư mục. Điều này làm việc cho chrome cũng bởi vì cả hai đều sử dụng webkit đó là cách asp.net xác định Safari1Plus.

Tiếp chạy% SystemRoot% \ Microsoft.NET \ Framework [version] \ aspnet_regbrowsers -i

này sẽ biên dịch tất cả các tập tin trình duyệt thành một lắp ráp và thêm nó vào GAC.

bây giờ menu asp.net sẽ hiển thị chính xác trong safari và chrome.

Hoặc bạn có thể thêm tệp vào thư mục App_Browsers trong mỗi ứng dụng web của mình.

Answer 4

Thêm ClientTarget="uplevel" để chỉ thị trang như vậy làm cho Safari công việc:

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

Answer 5

Mayank Sharma tìm thấy một giải pháp mà làm việc với các trang chủ, chứ không phải chỉnh sửa trang cá nhân. Tất cả các trang sử dụng trang chính được cố định liền mạch. Nó vẫn là một hack, nhưng bạn làm những gì bạn có. Đây là mã trang chủ ví dụ về mã vạch.

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); 
    } 
} 

Answer 6

Đây là phiên bản @Mayank Sharma/@jball C# được chuyển đổi thành VB.NET. Cảm ơn những người sửa chữa, đã làm tôi thất vọng hàng tháng trời. Vấn đề của tôi là mọi trình duyệt trên MAC và PC đều hoạt động ngoại trừ IE8 và Chrome. Nhưng sau đó Chrome, nhiều như tôi thích nó, thường không chạy Google Docs - làm việc mà ra !!!

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 

Bạn sẽ lưu ý rằng tôi phải kiểm tra "fake_user_agent" chứ không phải "Safari".

Answer 7

Tôi chỉ muốn gửi tùy chọn thay thế. Điều này làm việc cho ASP.NET 3.5.

• Thêm "App_Browsers" ASP.NET thư mục để dự án của bạn
• Tạo một file trình duyệt trong thư mục này

• Trong tập tin trình duyệt, thêm đoạn mã sau giữa <browsers> tag:

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

Đó đúng nên làm cho điều khiển trình đơn trong Chrome/Safari.

Answer 8

Sự cố với Chrome và Safari không hiển thị điều khiển menu đúng là do hộp hình ảnh skiplink điều hướng được Chrome và Safari hiển thị.

Nếu bạn làm một css display: none; trên hình ảnh cho skiplink thì các vị trí điều khiển menu giống như nó cần.

Tôi đã thử nghiệm điều này trên một menu cấp 1 đơn giản chứ không phải trình đơn lồng nhau.

http://www.s-t-f-u.com/2011/05/05/asp-net-menu-control-positioning-in-safari-google-chrome/

Answer 9

Làm việc như ảo thuật!

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