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

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

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

首先是IE 8 Partner Build:

接着是Google Chrome:

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

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

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

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

看看代码:

<%@ Page Language="C#" %> 

<script runat="server">
    void OnClick(Object sender, MenuEventArgs e)
    {
        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:

内容如下:

 

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移植到网站上:

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

 

 

 

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

 

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" 这个属性:

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

 

 

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


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


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


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


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


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


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


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


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


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


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


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


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

IE 8:

Google Chrome:

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

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

时间: 2024-09-23 11:17:58

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

asp.net Menu控件+SQLServer实现动态多级菜单_实用技巧

首先是数据表的设计 其中treeId指的是该菜单项的父ID,如果treeId为0.表示该菜单项为根菜单项,否则表示他为某菜单项的子菜单,比如id为2的项,他的父节点是1.则他是张三的子菜单,而张三是根菜单,position只用于根菜单项,用于控制显示的顺序. 往网页里拖入一个menu控件,然后添加代码 复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using Sy

ASP.net Menu控件在Google Chrome和Safari浏览器下显示错位的解决办法_实用技巧

复制代码 代码如下: <browsers> <browser id="Safari3" parentID="Safari1Plus"> <identification> <useragent match="Safari/\d+\.\d+" /> </identification> <capture> <useragent match="Version/(?'v

asp的menu控件子菜单能水平放置吗?

问题描述 menu有属性Orientation="Horizontal"可以让一级菜单水平,但是2级菜单就没办法水平放置了,谁有办法呢 解决方案 解决方案二:要创建两个Menu解决方案三:该回复于2008-12-19 14:42:15被版主删除

ASP.NET中的Menu控件的应用及XmlDataSource的了解_实用技巧

以前一直以为菜单都是通过sitemap制作的,最近看到项目中的方法是使用XmlDataSource榜定的. Menusite.xlm文件: 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Menusvalue=""> <TopMenuid="100"value=""ImageUrl="~/App_Themes/Publ

新手求解,关于导航Menu控件…………

问题描述 在VS2008中建了一个母版页,并在其中拖了一个MENU控件,绑定了地图测试时,MEnu的下拉菜单为空白??想问下有经验的高人们碰到过这样的问题没?应该怎么解? 解决方案 解决方案二:可怜啊没分连看都没人看啊??解决方案三:会不会是你的站点地图写的有问题..解决方案四:<asp:SiteMapDataSourceID="SMDS"runat="server"ShowStartingNode="False"/><asp:

asp.net验证控件气泡提示效果源代码

asp.net|源代码|验证控件|气泡 [用途:]       本程序能改善asp.net的验证控件的显示效果,用比较人性化的气泡提示来替换掉原来枯燥的界面提示,并带有"关闭提示"的功能,有效的解决了一个输入框带多个验证控件时,显示错误提示信息不在同一个地方的缺陷,也有效解决了验证控件占用页面提示信息版面的缺陷. [效果截图:] [使用方法:] 将WinValidatorFiles文件夹copy到站点根目录,然后在 </form>之后插入如下代码:<script ty

Cutting Edge:使用客户端行为扩展ASP.NET DataGrid 控件

asp.net|datagrid|客户端|控件 Cutting Edge:使用客户端行为扩展ASP.NET DataGrid 控件 (可拖动列和客户端排序) 英文原文:Extend the ASP.NET DataGrid with Client-side Behaviors作者:Dino Esposito翻译:MasterLRC源码:CuttingEdge0401.exe 如同比萨饼厨师的擀面杖,DataGrid 控件,对于一个熟练的ASP.NET开发者来说是非常基本而且有用的工具(译者:老外

menu控件加载有错误,并且鼠标滑过时报“当前页的脚本发生错误”

问题描述 我的程序使用menu控件导航,前两天突然menu控件加载时有错误,表现为有下拉菜单项的小图片无法显示.而且鼠标放在menu上,页面提示"当前页的脚本发生错误,是否继续运行".同样的代码在别人的机器上没有问题.用我的ie访问别人发布的相同的程序也没有问题.请问是什么原因造成的?谢谢帮忙!!!! 解决方案 解决方案二:请高手指教,很急,在线等!!!解决方案三:已经解决了重装了framework解决方案四:有问题请先GOOGLE,BAIDU

借鉴ASP.NET的控件模型辅助UI自动化测试

概述 在敏捷测试中UI的自动化测试(一般我们也称这层测试为功能测试或验收测试,本文单指Web UI的自动化测试)虽然没有单元测试那么广为提及,但因为其与最终用户最近,所以基于用户场景的UI自动化测试还是有其重要的意义的.使用UI自动化测试对产品的关键功能路径进行验证及回归,比起传统的QA手工执行Test case可以更快地得到反馈,也让发布变得更有信心. 理想状况下,我们应该将所有可以固化下来的Test case都自动化起来,而让我们的测试人员进行更有挑战性的探索性测试活动.让机器做已知领域的事