解决Google浏览器不兼容ASP.NET Menu控件的问题

简介: Google浏览器正式版刚刚发布, 相信这也是IE Team不想听到的消息, 而与此同时IE 8 Partner Build也对一些特定的人开放测试了, 据微软IE开发团队的陈本峰同学说, 这个Build是狠新的了, 而我作为新时代的白老鼠, 也迫不及待的下载了这些新鲜东西来玩玩.

Google浏览器正式版刚刚发布, 相信这也是IE Team不想听到的消息, 而与此同时IE 8 Partner Build也对一些特定的人开放测试了, 据微软IE开发团队的陈本峰同学说, 这个Build是狠新的了, 而我作为新时代的白老鼠, 也迫不及待的下载了这些新鲜东西来玩玩.

话入正题, Google浏览器在Beta版的时候相信很多朋友都发现他对ASP.NET的MENU控件兼容性很差, 当时我也没有找到好的方法解决, 而且又是Beta版软件, 所以也还抱着正式版一定会修复这个错误的希望, 而另我失望的是正式版发布了仍然有这个问题, 不知道是不是Google故意的, 没办法, 既然如此, 只好硬着头皮修复了, 首先给大家看看当前不兼容状态的样子:

首先是IE 8 Partner Build:

image

接着是Google Chrome:

image

大家看看这菜单都抽抽成什么样子了, 我很郁闷啊.

闲话不多说了, 经过我狂搜了一下, 发现目前只有CSSFriendly才能修复这个问题, CSS Friendly是一个非常不错的开源项目, 也是备受微软官方关注的, 他的主页是: http://www.codeplex.com/cssfriendly .

首先看看其内部自带的代码示例如何, 用VS 2005打开解决方案:

image

结构简单的项目, 一个是功能, 另一个是演示, 在演示的Web项目中我们能找到一个SampleMenu.aspx的页面, 这个就是我们需要用到的:

image

看看代码:

img_405b18b4b6584ae338e0f6ecaf736533.gif img_1c53668bcee393edac0d7b3b3daff1ae.gif <% @ Page Language="C#"  %>  

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
< script  runat ="server" >
    
void OnClick(Object sender, MenuEventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
{
        MessageLabel.Text 
= "You selected " + e.Item.Text + ".";
        e.Item.Selected 
= true;
    }

</ script >  

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< link  rel ="stylesheet"  href ="SimpleMenu.css"  type ="text/css"   />
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
        
< asp:Menu  ID ="EntertainmentMenu"  runat ="server"  Orientation ="Horizontal"  onmenuitemclick ="OnClick"  CssSelectorClass ="SimpleEntertainmentMenu" >
            
< Items >
                
< asp:MenuItem  Text ="Music" >
                    
< asp:MenuItem  Text ="Classical"   />
                    
< asp:MenuItem  Text ="Rock" >
                        
< asp:MenuItem  Text ="Electric"   />
                        
< asp:MenuItem  Text ="Acoustical"   />
                    
</ asp:MenuItem >
                    
< asp:MenuItem  Text ="Jazz"   />
                
</ asp:MenuItem >
                
< asp:MenuItem  Text ="Movies"  Selectable ="false" >
                    
< asp:MenuItem  Text ="Action"   />
                    
< asp:MenuItem  Text ="Drama"   />
                    
< asp:MenuItem  Text ="Musical"   />
                
</ asp:MenuItem >
            
</ Items >
        
</ asp:Menu >
        
< div  id ="EntertainmentMessage" >
            
< asp:Label  id ="MessageLabel"  runat ="server"   />
        
</ div >
    
</ form >
</ body >
</ html >  

唯一特别之处就是使用了一个CssSelectorClass="SimpleEntertainmentMenu" 来加载CSS样式.

接着还要看一个Browser:

image

内容如下:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Browser
<browsers>
    
<browser refID="Default">
        
<controlAdapters>
            
<adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType
="CSSFriendly.MenuAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.TreeView"
                     adapterType
="CSSFriendly.TreeViewAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.DetailsView"
                     adapterType
="CSSFriendly.DetailsViewAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.FormView"
                     adapterType
="CSSFriendly.FormViewAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.DataList"
                     adapterType
="CSSFriendly.DataListAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.GridView"
                     adapterType
="CSSFriendly.GridViewAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.ChangePassword"
                     adapterType
="CSSFriendly.ChangePasswordAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.Login"
                     adapterType
="CSSFriendly.LoginAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.LoginStatus"
                     adapterType
="CSSFriendly.LoginStatusAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.CreateUserWizard"
                     adapterType
="CSSFriendly.CreateUserWizardAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.PasswordRecovery"
                     adapterType
="CSSFriendly.PasswordRecoveryAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.RadioButtonList"
                     adapterType
="CSSFriendly.RadioButtonListAdapter" />
            
<adapter controlType="System.Web.UI.WebControls.CheckBoxList"
                     adapterType
="CSSFriendly.CheckBoxListAdapter" />
        
</controlAdapters>
    
</browser> 

    
<browser id="W3C_Validator" parentID="default">
        
<identification>
            
<userAgent match="^W3C_Validator" />
        
</identification>
        
<capabilities>
            
<capability name="browser"              value="W3C Validator" />
            
<capability name="ecmaScriptVersion"    value="1.2" />
            
<capability name="javascript"           value="true" />
            
<capability name="supportsCss"          value="true" />
            
<capability name="supportsCallback"     value="true" />
            
<capability name="tables"               value="true" />
            
<capability name="tagWriter"            value="System.Web.UI.HtmlTextWriter" />
            
<capability name="w3cdomversion"        value="1.0" />
        
</capabilities>
    
</browser>
</browsers> 

大家可以看到这个模板中可以让ASP.NET中各种控件重新设定样式, 好了, 到这里我们已经基本了解了CSS Friendly的运作原理, 然后我们来将其移植到我们现有的项目中

零码网站 SP1 就要发布了

首先将Browser移植到网站上:

image

然后将CSSFriendly的库文件加入到项目引用中:

image 

 

image 

接着修改一些Browser的内容, 由于我们这里只需要对MENU控件进行CSS样式的修改, 所以我们将Browser的内容去掉一些, 修改后如下:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Learnmark Browser
<browsers>
    
<browser refID="Default">
        
<controlAdapters>
            
<adapter controlType="System.Web.UI.WebControls.Menu"
                     adapterType
="CSSFriendly.MenuAdapter" /> 

        
</controlAdapters>
    
</browser> 

    
<browser id="W3C_Validator" parentID="default">
        
<identification>
            
<userAgent match="^W3C_Validator" />
        
</identification>
        
<capabilities>
            
<capability name="browser"              value="W3C Validator" />
            
<capability name="ecmaScriptVersion"    value="1.2" />
            
<capability name="javascript"           value="true" />
            
<capability name="supportsCss"          value="true" />
            
<capability name="supportsCallback"     value="true" />
            
<capability name="tables"               value="true" />
            
<capability name="tagWriter"            value="System.Web.UI.HtmlTextWriter" />
            
<capability name="w3cdomversion"        value="1.0" />
        
</capabilities>
    
</browser>
</browsers> 

其实我们就在把ControlAdapters里面的东西移除了, 只留下Menu部分, 原因是如果将所有控件的CSS都重新定义, 工作量太大, 不能及时发布SP1了, 呵呵, 这样我们只要修改Menu的一些样式即可, 如果以后有时间再把其他的加上并且修改.

最后来修改Menu控件的代码, 加入CssSelectorClass="SimpleEntertainmentMenu" 这个属性:

image

然后修改CSS, 加入如下内容:

 

 

img_405b18b4b6584ae338e0f6ecaf736533.gif img_1c53668bcee393edac0d7b3b3daff1ae.gif .SimpleEntertainmentMenu ul.AspNet-Menu  /**/ /* Tier 1 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
      width
:100%;
      line-height
:32px;
      font-weight
:bold;
      background-repeat
:repeat-x;
      background-image
:url('../Images/BackgroundNav.gif');
    color
: Black;
    height
:32px;
    float
:left;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu li 
/**/ /* Tier 1 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    width
:114px;
    text-align
:center;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu li:hover 
/**/ /* Tier 1 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    width
:114px;
    text-align
:center;
    color
: #FFFFFF;
    background
: #CC0000;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu li a:hover 
/**/ /* Tier 1 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    color
:White;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul  
/**/ /* Tier 2 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    background
:#EFEFEF;
    color
:#000000;
    width
:140px;
    left
:0;
    float
:left;
    line-height
:32px;
    font-weight
:bold;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul li  
/**/ /* Tier 2 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {    
    border
:1px white solid;
    width
:138px;
    text-align
:left;
    text-indent
:27px;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul li:hover  
/**/ /* Tier 2 move on */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    background
:#C0C0C0;
    color
:#FFFFFF;
    width
: 138px;
    text-align
:left;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul li a  
/**/ /* Tier 2 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    color
:Black;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul li a:hover  
/**/ /* Tier 2 */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    color
:White;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul ul  
/**/ /* Tier 3+ */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    background
:#EFEFEF;
    color
:#000000;
    width
:138px;
    left
:138px;
    float
:left;
    top
:0px;
    line-height
:32px;
    font-weight
:bold;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu ul.AspNet-Menu ul ul li 
/**/ /* Tier 3+ */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    border
:1px white solid;
    width
:138px;
    text-align
:left;
    text-indent
:27px;
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif.SimpleEntertainmentMenu a 
/**/ /* all anchors and spans (nodes with no link) */
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
{} {
    color
: Black;
}
 

这样我们就可以实现下面效果了:

IE 8:

image

Google Chrome:

image

大家也可以访问: http://www.learnmark.com.cn/ 来查看效果

最后非常感谢Google, 让我又学习了点东西.

目录
相关文章
|
6月前
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
|
6月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
317 0
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
44 8
|
1月前
|
Web App开发 安全 中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品,支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件,并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末,安装包含详细说明。
|
14天前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
|
16天前
|
Web App开发 人工智能 前端开发
Google 浏览器中的 AI 魔法 — window.ai
本文介绍了如何在 Chrome Canary 中启用并使用设备端 AI 功能。通过下载 Chrome Canary 并启用相关 API,你可以在本地运行 AI 模型,无需互联网连接。文章详细讲解了设置步骤、确认 AI 可用性的方法以及如何使用 `window.ai` 进行文本会话。虽然目前的性能和功能还有待提升,但这一技术为未来的前端开发和智能应用提供了无限可能。
43 0
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
20天前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
2月前
|
开发框架 JavaScript 前端开发
|
3月前
|
JavaScript 网络安全
浏览器——net::ERR_CONNECTION_TIMED_OUT
浏览器——net::ERR_CONNECTION_TIMED_OUT
199 0