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

最新推荐文章于 2020-06-06 19:16:22 发布

weixin_34247299

最新推荐文章于 2020-06-06 19:16:22 发布

阅读量251

点赞数

文章标签： ui xhtml c#

本文介绍如何使用CSSFriendly解决Google浏览器对ASP.NET MENU控件的兼容性问题，通过修改Browser配置及CSS样式，实现良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

</identification>

</capabilities>

</browser>

</browsers>

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

零码网站 SP1 就要发布了

首先将Browser移植到网站上:

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

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

Learnmark Browser

<adapter controlType="System.Web.UI.WebControls.Menu"

adapterType="CSSFriendly.MenuAdapter" />

</controlAdapters>

</browser>

</identification>

</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, 让我又学习了点东西.