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重现代码如下，可点击下载：

/Files/blodfox777/ImageButtonCSSbug.rar

 

问题分析：

其原因很简单也很令我迷惑不解：

我们可以查看测试页面的源代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 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控件都被诡异的加上了这么个属性：

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工程：

2. 在AppCode中建立自己的Adapter：

using System;
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行）：

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

 
posted @ 2009-01-16 15:29  LanceZhang  阅读(2980)  评论(18)  编辑  收藏  举报