背景
今天上午帮同事重现一个客户提交的关于ASP.NET ImageButton/Image控件的bug,最终找出了原因,提交到了产品组,但很是不解,在网上搜索了一下,也没见大家讨论这个问题。在此就和大家研究一下:
问题重现
其描述如下:
1. 页面上放上简单的Image控件或ImageButton控件
2. 设置下列CssClass到Image控件或ImageButton控件:
width : 116px ;
height : 160px ;
border-width : thick ;
border-color : White ;
border-style : solid ;
background-color : #00FFFF ;
}
3. 这时,便会发现border并没有出现在ImageButton/Image控件周围!
bug重现代码如下,可点击下载:
/Files/blodfox777/ImageButtonCSSbug.rar
问题分析:
其原因很简单也很令我迷惑不解:
我们可以查看测试页面的源代码:
2
3 < html xmlns ="http://www.w3.org/1999/xhtml" >
4 < head >< title >
5
6 </ title >< link href ="default.css" rel ="stylesheet" type ="text/css" /></ head >
7 < body style ="background-color: Black;" >
8 < form method ="post" action ="ImgImgBtnbug.aspx" id ="form1" >
9 < div >
10 < input type ="hidden" name ="__VIEWSTATE" id ="__VIEWSTATE" value ="/wEPDwUKLTk1MTI0MTc4MWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWdlQnV0dG9uMSuw07BfvrPox/zg/81PJFTlRTxV" />
11 </ div >
12 < div >
13 < input type ="hidden" name ="__EVENTVALIDATION" id ="__EVENTVALIDATION" value ="/wEWAgLotNbxDwLSwpnTCLCUd6TpDrRptJdtrDuvBPXrEdQX" />
14 </ div >
15 < div >
16 < img id ="Image1" class ="BookIcon" src ="MSConnect_Logo.gif" style ="border-width:0px;" />
17 < input type ="image" name ="ImageButton1" id ="ImageButton1" class ="BookIcon" src ="MSConnect_Logo.gif" style ="border-width:0px;" />
18 </ div >
19 </ form >
20 </ body >
21 </ html >
请大家注意第16行和17行,Image控件和ImageButton控件都被诡异的加上了这么个属性:
也就是说,微软在Render时,如果我们没有设置ImageButton/Image 控件的BorderWidth属性的话,不管我们是否定义了border-width样式,它都会为我们加上
解决方案:
经过测试发现,这个现象在各种浏览器中均会发生,于是,我们可以尝试使用ASP.NET 2.0 CSS Friendly Control Adapters 1.0来解决:
原理:在RenderBeginTag时强制将render出的"border-width:0px;"取消掉!
步骤:
1. 建立ASP.NET 2.0 CSS Friendly Control Adapters工程:
2. 在AppCode中建立自己的Adapter:
using System.Collections.Generic;
using System.Web;
using System.IO;
using System.Web.UI;
namespace LanceZhang
{
/// <summary>
/// Summary description for ImageControlAdapters
/// </summary>
public class ImageControlAdapters: System.Web.UI.WebControls.Adapters.WebControlAdapter
{
public ImageControlAdapters()
{
//
// TODO: Add constructor logic here
//
}
protected override void RenderBeginTag(HtmlTextWriter writer)
{
StringWriter swritter = new StringWriter();
HtmlTextWriter hwritter = new HtmlTextWriter(swritter);
base .RenderBeginTag(hwritter);
hwritter.Flush();
hwritter.Close();
string origTag = swritter.ToString();
string newTag = origTag.Replace( " border-width:0px; " , "" );
writer.Write(newTag);
}
protected override void RenderEndTag(HtmlTextWriter writer)
{
}
protected override void RenderContents(HtmlTextWriter writer)
{
}
}
}
3. 在AppBrowser\CSSFriendlyAdapters.browser中映射自己的Adapter(26,27行):
2 < browser refID ="Default" >
3 < controlAdapters >
4 < adapter controlType ="System.Web.UI.WebControls.Menu"
5 adapterType ="CSSFriendly.MenuAdapter" />
6 < adapter controlType ="System.Web.UI.WebControls.TreeView"
7 adapterType ="CSSFriendly.TreeViewAdapter" />
8 < adapter controlType ="System.Web.UI.WebControls.DetailsView"
9 adapterType ="CSSFriendly.DetailsViewAdapter" />
10 < adapter controlType ="System.Web.UI.WebControls.FormView"
11 adapterType ="CSSFriendly.FormViewAdapter" />
12 < adapter controlType ="System.Web.UI.WebControls.DataList"
13 adapterType ="CSSFriendly.DataListAdapter" />
14 < adapter controlType ="System.Web.UI.WebControls.GridView"
15 adapterType ="CSSFriendly.GridViewAdapter" />
16 < adapter controlType ="System.Web.UI.WebControls.ChangePassword"
17 adapterType ="CSSFriendly.ChangePasswordAdapter" />
18 < adapter controlType ="System.Web.UI.WebControls.Login"
19 adapterType ="CSSFriendly.LoginAdapter" />
20 < adapter controlType ="System.Web.UI.WebControls.LoginStatus"
21 adapterType ="CSSFriendly.LoginStatusAdapter" />
22 < adapter controlType ="System.Web.UI.WebControls.CreateUserWizard"
23 adapterType ="CSSFriendly.CreateUserWizardAdapter" />
24 < adapter controlType ="System.Web.UI.WebControls.PasswordRecovery"
25 adapterType ="CSSFriendly.PasswordRecoveryAdapter" />
26 < adapter controlType ="System.Web.UI.WebControls.Image"
27 adapterType ="LanceZhang.ImageControlAdapters" />
28 </ controlAdapters >
29 </ browser >
30
31 < browser id ="W3C_Validator" parentID ="default" >
32 < identification >
33 < userAgent match ="^W3C_Validator" />
34 </ identification >
35 < capabilities >
36 < capability name ="browser" value ="W3C Validator" />
37 < capability name ="ecmaScriptVersion" value ="1.2" />
38 < capability name ="javascript" value ="true" />
39 < capability name ="supportsCss" value ="true" />
40 < capability name ="supportsCallback" value ="true" />
41 < capability name ="tables" value ="true" />
42 < capability name ="tagWriter" value ="System.Web.UI.HtmlTextWriter" />
43 < capability name ="w3cdomversion" value ="1.0" />
44 </ capabilities >
45 </ browser >
46 </ browsers >
47
48
编译,即可!
原来的效果图:
使用了Adapter之后的正常效果:
解决方案全部代码如下,可点击下载:
/Files/blodfox777/CssAdapters2.rar