加载中…ASP.NET ImageButton/Image 控件关于border的一个诡异
(2009-06-03 23:51:13)
标签：
it |
分类： ASP.NET |
ASP.NET ImageButton/Image 控件关于border的一个诡异的BUG及其解决方案
背景
今天上午帮同事重现一个客户提交的关于ASP.NET ImageButton/Image控件的bug，最终找出了原因，提交到了产品组，但很是不解，在网上搜索了一下，也没见大家讨论这个问题。在此就和大家研究一下：
问题重现其描述如下：
1. 页面上放上简单的Image控件或ImageButton控件
2. 设置下列CssClass到Image控件或ImageButton控件：
.BookIcon{
width:116px;
height:160px;
border-width:thick;
border-color:White;
border-style:solid;
background-color:#00FFFF;
}
3. 这时，便会发现border并没有出现在ImageButton/Image控件周围！
bug重现代码如下，可点击下载：
http://file.ddvip.com/2009_01/1232178185_ddvip_5514.rar
问题分析：
其原因很简单也很令我迷惑不解：
我们可以查看测试页面的源代码：
1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3<htmlxmlns="http://www.w3.org/1999/xhtml">
4<head><title>
5
6</title><linkhref="default.css"rel="stylesheet"type="text/css"/></head>
7<bodystyle="background-color:Black;">
8 <formmethod="post"action="ImgImgBtnbug.aspx"id="form1">
9<div>
10<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"value="/wEPDwUKLTk1MTI0MTc4MWQYA
11</div>
12<div>
13 <inputtype="hidden"name="__EVENTVALIDATION"id="__EVENTVALIDATION"value="/wEWAgLotNbxDwLSwpnTCLCUd
14</div>
15 <div>
16 <imgid="Image1"class="BookIcon"src="MSConnect_Logo.gif"style="border-width:0px;"/>
17 <inputtype="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控件都被诡异的加上了这么个属性：
style="border-width:0px;"
也就是说，微软在Render时，如果我们没有设置ImageButton/Image 控件的BorderWidth属性的话，不管我们是否定义了border-width样式，它都会为我们加上
style="border-width:0px;"
解决方案：
经过测试发现，这个现象在各种浏览器中均会发生，于是，我们可以尝试使用ASP.NET 2.0 CSS Friendly Control Adapters 1.0来解决：
原理：在RenderBeginTag时强制将render出的"border-width:0px;"取消掉！
步骤：
1. 建立ASP.NET 2.0 CSS Friendly Control Adapters工程：
http://img.ddvip.com/2009_01_17/1232178220_ddvip_4347.jpgImageButton/Image
2. 在AppCode中建立自己的Adapter：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Web;
usingSystem.IO;
usingSystem.Web.UI;
namespaceLanceZhang
{
///<summary>
///SummarydescriptionforIma
///</summary>
publicclassImageControlA
{
publicImageControlAdapte
{
//
//TODO:Addconstructorlogichere
//
}
protectedoverridevoidRen
{
StringWriterswritter=newStringWriter();
HtmlTextWriterhwritter=newHtmlTextWriter(swritter);
base.RenderBeginTag(hwritter);
hwritter.Flush();
hwritter.Close();
stringorigTag=swritter.ToString();
stringnewTag=origTag.Replace("border-width:0px;","");
writer.Write(newTag);
}
protectedoverridevoidRen
{
}
protectedoverridevoidRen
{
}
}
}
3.
在AppBrowserCSSFriendlyAda
1<browsers>
2 <browserrefID="Default">
3 <controlAdapters>
4 <adaptercontrolType="System.Web.UI.WebControls.Menu"
5 adapterType="CSSFriendly.MenuAdapter"/>
6 <adaptercontrolType="System.Web.UI.WebControls.TreeView"
7 adapterType="CSSFriendly.TreeViewAdapter"/>
8 <adaptercontrolType="System.Web.UI.WebControls.DetailsView"
9 adapterType="CSSFriendly.DetailsViewAdapter"/>
10 <adaptercontrolType="System.Web.UI.WebControls.FormView"
11 adapterType="CSSFriendly.FormViewAdapter"/>
12 <adaptercontrolType="System.Web.UI.WebControls.DataList"
13 adapterType="CSSFriendly.DataListAdapter"/>
14 <adaptercontrolType="System.Web.UI.WebControls.GridView"
15 adapterType="CSSFriendly.GridViewAdapter"/>
16 <adaptercontrolType="System.Web.UI.WebControls.ChangePassword"
17 adapterType="CSSFriendly.ChangePasswordAdapter"/>
18 <adaptercontrolType="System.Web.UI.WebControls.Login"
19 adapterType="CSSFriendly.LoginAdapter"/>
20 <adaptercontrolType="System.Web.UI.WebControls.LoginStatus"
21 adapterType="CSSFriendly.LoginStatusAdapter"/>
22 <adaptercontrolType="System.Web.UI.WebControls.CreateUserWizard"
23 adapterType="CSSFriendly.CreateUserWizardAdapter"/>
24 <adaptercontrolType="System.Web.UI.WebControls.PasswordRecovery"
25 adapterType="CSSFriendly.PasswordRecoveryAdapter"/>
26 <adaptercontrolType="System.Web.UI.WebControls.Image"
27 adapterType="LanceZhang.ImageControlAdapters"/>
28 </controlAdapters>
29 </browser>
30
31 <browserid="W3C_Validator"parentID="default">
32 <identification>
33 <userAgentmatch="^W3C_Validator"/>
34 </identification>
35 <capabilities>
36 <capabilityname="browser" value="W3CValidator"/>
37 <capabilityname="ecmaScriptVersion" value="1.2"/>
38 <capabilityname="javascript" value="true"/>
39 <capabilityname="supportsCss" value="true"/>
40 <capabilityname="supportsCallback" value="true"/>
41 <capabilityname="tables" value="true"/>
42 <capabilityname="tagWriter" value="System.Web.UI.HtmlTextWriter"/>
43 <capabilityname="w3cdomversion" value="1.0"/>
44 </capabilities>
45 </browser>
46</browsers>
47
48
编译，即可！
原来的效果图：
http://img.ddvip.com/2009_01_17/1232178220_ddvip_3774.jpgImageButton/Image
使用了Adapter之后的正常效果：
http://img.ddvip.com/2009_01_17/1232178220_ddvip_182.jpgImageButton/Image
解决方案全部代码如下，可点击下载：
http://file.ddvip.com/2009_01/1232178064_ddvip_4659.rar
出处：http://blodfox777.cnblogs.com/
喜欢
0
赠金笔